<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
font-family: Microsoft ya black;
}
Form span{
Color: #f00;
Font-weight:bold;
Display:none;
}
</style>
<script src= "Jquery-1.8.3.js" ></script>
<body>
<form>
<p> User name:</p>
<p>
<input type= "text" name= "UserName" class= "auth" >
<span> user name cannot be empty </span>
</p>
<p> Password:</p>
<p>
<input type= "text" name= "pwd" class= "auth" >
<span> length must be 6 bits </span>
</p>
<p> Confirm Password:</p>
<p>
<input type= "text" name= "repwd" class= "auth" >
<span> two times the password must be consistent </span>
</p>
<p>
<button> Submit </button>
</p>
</form>
</body>
<script type= "Text/javascript" >
User name Verification
$ (' input[name=username] '). blur (function () {
val=$ (This). Val (); Get user Name
if (val.length==0) {
a=0;
$ (this). Data ({' num ': 0}); Binding properties
$ (this). Next (). Show (); Display a prompt message
}else{
A=1;
$ (this). Data ({' num ': 1});
$ (this). Next (). Hide (); Hide Cue messages
}
});
Password verification
$ (' input[name=pwd] '). blur (function () {
val=this.value; // 获取密码if(val.length<6){ //b=0; $(this).data({‘num‘:0}); // 绑定属性 $(this).next().show(); // 显示提示信息}else{ //b=1; $(this).data({‘num‘:1}); // 绑定属性 $(this).next().hide(); // 隐藏掉提示信息}
});
Confirm Password Verification
$ (' input[name=repwd] '). blur (function () {
pwd=$ (' input[name=pwd] '). Val (); Get password
repwd=$ (This). Val (); Get confirmation Password
if (pwd!=repwd) {
c=0;
$ (this). Data ({' num ': 0}); Binding properties
$ (this). Next (). Show (); Display a prompt message
}else{
C=1;
$ (this). Data ({' num ': 1}); Binding properties
$ (this). Next (). Hide (); Hide Cue messages
}
});
Form submission
$ (' form '). Submit (function () {
Get 3 text boxes out of focus
$ (' Input.auth '). blur (); The way to lose focus
R=a+b+c;
if (r==3) {
return true; Submit Form
}else{
return false; Block form submission
// }
//
The second way
r=0;
$ (' Input.auth '). each (function () {
r+=$ (this). Data (' num '); Collect Data
});
if (r==3)
return true; Submit Form
Else
return false; Do not submit form
});
</script>
Using jquery to implement form validation capabilities