JQuery verifies that the JSP page properties are null of instance code

  • 2020-03-26 23:49:26
  • OfStack

Description: Validation for null first of all, the premise of guarantee for verification before submitting the form, if the verification results have empty item limit form cannot be submitted, and prompt validation error message, verify the page properties are not empty form under the condition of normal submitted, this part belong to JS part, basic business logic layer and control layer and the background has nothing to do.

Submission can be restricted by restricting the form tag or by adding an onclick event to the submit button:

< The form action = ".." Method = "post" onsubmit = "return check ();" >
< Input type="submit" value=" submit" onclick="return check()" >

Case study:


<form action="./login.action" method="post" onsubmit="return check();">
<table>
<tr>
<td width="451"> </td>
<td width="378">
<table >
<tr>
<td width="60"> </td>
<td>
<font color="#000000"> User name: </font>
</td>
<td align="left"> <input name="userInfo.userName" id="userName" type="text">
<span id="checkUserName"></span> 
</td>
<tr> <td> </td>
<td align="right" nowrap>
<font color="#000000"> The secret   Code: </font>
</td>
<td align="left">
<input name="userInfo.password" id="password" type="password">
<span id="checkPassword"></span>
</td>
</tr>
<tr>
<td colspan="4" align="center" nowrap>
<input type="submit" id="btnLog" value="  deng   record  " >
   <input type="reset" value="  heavy   buy  ">
</td>
</tr>
</table>
</form>

< ! -- introduce js file jquery-->

<script type="text/javascript" src="js/common/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function check(){
var userName=$("#userName").val();
var password=$("#password").val();
alert(userName);
alert(password);
if(userName==""){
$("#checkUserName").html("<font color='red'> Username cannot be empty! </font>");
return false;
}
if(password==""){
$("#checkPassword").html("<font color='red'> Password cannot be empty! </font>");
return false;
}
return true;
}
</script> 


Related articles: