The java web login page uses jQuery loop to judge that the input box cannot be empty

Make a light 2022-05-22 12:19:12 阅读数:716

javawebloginpageuses

When the user name input box and password input box 、 When nothing is entered in the verification code input box , Click login to pop up a pop-up window showing that the user name cannot be empty

When you only enter the password and do not enter the user name and verification code , Click login to pop up a pop-up window showing that the user name cannot be empty

  When you enter only the user name and not the password , When the verification code is not entered , The display password cannot be empty

After entering the user name and password , When the verification code is not entered , The display verification code is empty

JQuery Code display , Note the need to introduce jquery package , Of course, you can also quote online jquery package

The company's jquery( Fast recommended )

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

Through simple jquery Code to determine whether the two input boxes are empty


<script src="js/jquery-1.9.1.min.js"></script>
<script>
$('#login_btn').on('click', function(){
var num=0;
var str="";
$("input[type$='text'],input[type$='password']").each(function(n){
if($(this).val()=="")
{
layer.alert(str+=""+$(this).attr("name")+" Can't be empty !\r\n",{
title: ' Prompt box ',
icon:0,
});
num++;
return false;
}
});
if(num>0){ return false;}
else{
layer.alert(' Login successful !',{
title: ' Prompt box ',
icon:1,
});
location.href="index.jsp";
layer.close(index);
}
});
</script>

Overall login interface code

<%--
Created by IntelliJ IDEA.
User:
Date: 2022/5/19
Time: 17:32
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="assets/js/ace-extra.min.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="assets/layer/layer.js" type="text/javascript"></script>
<title> Sign in </title>
</head>
<body class="login-layout Reg_log_style" style="background: url(images/login_bg.png);">
<div class="logintop">
<span> Welcome to the background management interface platform </span>
<ul>
<li><a href="#"> Back to the home page </a></li>
<li><a href="#"> help </a></li>
<li><a href="#"> About </a></li>
</ul>
</div>
<div class="loginbody">
<div class="login-container">
<div class="center"></div>
<div class="space-6"></div>
<div class="position-relative">
<div id="login-box" class="login-box widget-box no-border visible" style="margin-top: 50px;">
<div class="widget-body" >
<div class="widget-main" >
<h4 class="header blue lighter bigger">
<i class="icon-coffee green"></i>
Administrator login
</h4>
<div class="login_icon"><img src="images/login.png" /></div>
<form class="">
<fieldset>
<ul>
<li class="frame_style form_error">
<label class="user_icon"></label>
<input name=" user name " type="text" id="username"/><i> user name </i>
</li>
<li class="frame_style form_error">
<label class="password_icon"></label>
<input name=" password " type="password" id="userpwd"/><i> password </i>
</li>
<li class="frame_style form_error">
<label class="Codes_icon"></label>
<input name=" Verification Code " type="text" id="Codes_text"/><i> Verification Code </i>
<div class="Codes_region"></div>
</li>
</ul>
<div class="space"></div>
<div class="clearfix">
<label class="inline">
<input type="checkbox" class="ace">
<span class="lbl"> Save password </span>
</label>
<button type="button" class="width-35 pull-right btn btn-sm btn-primary" id="login_btn">
<i class="icon-key"></i>
Sign in
</button>
</div>
<div class="space-4"></div>
</fieldset>
</form>
<div class="social-or-login center">
<span class="bigger-110"> notice </span>
</div>
<div class="social-login center">
Please use IE8 And above ...
</div>
</div><!-- /widget-main -->
<div class="toolbar clearfix"></div>
</div><!-- /widget-body -->
</div><!-- /login-box -->
</div><!-- /position-relative -->
</div>
</div>
<div class="loginbm"> copyright 2021</div><strong></strong>
</body>
</html>
<script>
$('#login_btn').on('click', function(){
var num=0;
var str="";
$("input[type$='text'],input[type$='password']").each(function(n){
if($(this).val()=="")
{
layer.alert(str+=""+$(this).attr("name")+" Can't be empty !\r\n",{
title: ' Prompt box ',
icon:0,
});
num++;
return false;
}
});
if(num>0){ return false;}
else{
layer.alert(' Login successful !',{
title: ' Prompt box ',
icon:1,
});
location.href="index.jsp";
layer.close(index);
}
});
$(document).ready(function(){
$("input[type='text'],input[type='password']").blur(function(){
var $el = $(this);
var $parent = $el.parent();
$parent.attr('class','frame_style').removeClass(' form_error');
if($el.val()==''){
$parent.attr('class','frame_style').addClass(' form_error');
}
});
$("input[type='text'],input[type='password']").focus(function(){
var $el = $(this);
var $parent = $el.parent();
$parent.attr('class','frame_style').removeClass(' form_errors');
if($el.val()==''){
$parent.attr('class','frame_style').addClass(' form_errors');
} else{
$parent.attr('class','frame_style').removeClass(' form_errors');
}
});
})
</script>

copyright:author[Make a light],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/142/202205211820122986.html