Validation, now combined with the actual situation, I have often used in the project to organize the validation into an example demo, this article is to explain this example to understand the application of Validation.
| The code is as follows |
Copy Code |
<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.validate.js" ></script> |
Prepare CSS Styles
Page style I no longer elaborate, you can write a style, you can also see the demo page source code. The key style to emphasize here is the style to display the validation information
| The code is as follows |
Copy Code |
Label.error{color: #ea5200; margin-left:4px; padding:0px 20px;
Background:url (images/unchecked.gif) no-repeat 2px 0}
label.right{margin-left:4px; padding-left:20px; background:
URL (images/checked.gif) no-repeat 2px 0} |
Xhtml
| The code is as follows |
Copy Code |
<form id= "MyForm" action= "#" method= "POST" >
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" class= "mytable" >
<tr class= "Table_title" >
<TD colspan= "2" >jquery.validation form verification </td>
</tr>
<tr>
<TD width= "22%" align= "right" > Username:</td>
<td><input type= "text" name= "user" id= "user" class= "input required"/>
<p> user name is 3-16 characters, can be numbers, letters, underscores, and Chinese </p></td>
</tr>
<tr>
<TD align= "Right" > Password:</td>
<td><input type= "password" name= "pass" id= "pass" class= "input required"/>
<p> min Length: 6 Maximum length:16</p>
</td>
</tr>
<tr>
<TD align= "Right" > Confirm password:</td>
<td><input type= "Password" name= "repass" class= "input Required"/></td>
</tr>
</table>
</form> |
Limited to space, this article only intercepts a small part of the HTML code in the instance, the detailed XHTML code can be see the page demo source code. It is worth mentioning that I gave the label a "required" class style, and the following will refer to its role.
4, the application of validation plug-ins
How to invoke the validation plug-in:
| code is as follows |
copy code |
$ (function () {
var validate = $ ("#myform"). Validate ({
& nbsp; rules:{//define validation rules
...
},
messages:{//define hint information
...
}
})
}); |
Rules: Defines a validation rule, in the form of Key:value, where the key is the element to be validated, and value can be a string or object. For example, verify the length of the username and not allow null:
| The code is as follows |
Copy Code |
rules:{
user:{
Required:true,
Maxlength:16,
Minlength:3
},
......
} |
In fact, we in the XHTML code can directly specify the input class attribute to required, the role is not allowed to empty, so in the JS section does not have to repeat the writing. The same authentication email, set the input class attribute directly to email.
Messages: Defines the hint information, the form key of the Key:value is the element to be validated, the value is a string or function, and the message that is prompted when the validation does not pass.
| The code is as follows |
Copy Code |
messages:{
user:{
Required: "User name cannot be empty!" ",
Remote: "This username already exists, please change another username!" "
},
......
} |
In this case, the validation JS is written in accordance with the rules above, validation plug-ins encapsulate a lot of basic authentication methods, as follows:
Required:true must have a value and cannot be empty
Remote:url can be used to determine whether a user name is already present, and the server-side output is true, indicating that validation passes
Minlength:6 Minimum length is 6
Maxlength:16 Maximum length is 16
Rangelength: Length Range
RANGE:[10,20] Value range is between 10-20
Email:true Authentication Message
Url:true Authentication URL URLs
Dateiso:true Validation date format ' Yyyy-mm-dd '
Digits:true can only be a number
Accept: ' gif|jpg ' only accepts pictures of GIF or JPG suffixes. Extensions that are commonly used to verify files
Equalto: ' #pass ' is equal to the value of the form field, which is often used to validate the repeated input password
In addition, I also based on the actual situation of the project to extend a few verification, validated code in Validate-ex.js, before using the need to load this JS. It can provide the following validation:
Username:true user name can only include Chinese characters, English letters, numbers, and underscores
Ismobile:true Mobile phone Number verification
Isphone:true Mainland Mobile phone number verification
Iszipcode:true ZIP Code Verification
Isidcardno:true Mainland ID Card number verification
Ip:true IP Address Verification
Full instance
| The code is as follows |
Copy Code |
| <link rel= "stylesheet" type= text/css "href=". /css/main.css "/>
<style type= "Text/css" >
demo{width:850px margin:10px Auto; padding:20px background: #fff; color: #333}
input{width:220px height:18px padding:2px 2px 0 2px border:1px Solid #ccc}
. btn{width:68px height:22px; Border:none background:url (Images/btn.gif) no-repeat; Cursor:pointer}
. mytable{width:760px margin:20px Auto; border:2px solid #ccc}
. mytable td{padding:4px 6px; border-bottom:1px dotted #d3d3d3; color: #333}
. mytable TD p{line-height:16px; color: #999}
table_title{height:30px line-height:30px; background: #f7f7f7; font-weight:bold; font-size:14px} Label.error{color: #ea5200; margin-left:4px padding:0px 20px; Background:url (images/unchecked.gif) no-repeat 2px 0}
label.right{margin-left:4px padding-left:20px Background:url (images/checked.gif) no-repeat 2px 0}
</style>
<script type= "Text/javascript" src= ". /script/jquery.js "></script>
<script type= "Text/javascript" src= "/script/jquery.validate.js" ></script>
<script type= "Text/javascript" src= "/script/validate-ex.js" ></script>
<script type= "Text/javascript" >
$ (function () {
var validate = $ ("#myform"). Validate ({
rules:{
user:{
Maxlength:16,
Minlength:3,
Username:true,
Remote: {
URL: "chk_user.php",
Type: "Post",
Data: {user:function () {return encodeURIComponent ($ ("#user"). Val ());
}
},
pass:{
Maxlength:16,
Minlength:6
},
repass:{
Maxlength:16,
Minlength:6,
Equalto: "#pass"
},
Sex: "Required",
Email:{email:true},
Tel:{istel:true},
Phone:{ismobile:true},
Url:{url:true},
Birthday: "Dateiso",
years:{
Digits:true,
RANGE:[1,40]
},
Idcard: "Isidcardno",
ZipCode: "Iszipcode",
photo:{
Accept: "Gif|jpg|png"
},
ServerIP: "IP",
captcha:{
Remote: "process.php"
}
},
messages:{
user:{
Remote: "This username already exists, please change another username!" "
},
repass:{
Equalto: "Two times password input inconsistent!" "
},
Sex: "Please choose sex!" ",
birthday:{
Dateiso: "The date format is not right!"
},
years:{
Number: "The working age must be a figure!" "
},
Address: "Please select Region",
photo:{
Accept: "Avatar picture format is wrong!" "
},
captcha:{
Remote: "Verification code Error!" "
},
Low: ""
},
Errorplacement:function (Error, Element) {
if (Element.is (": Radio"))
Error.appendto (Element.parent ());
else if (element.is (": checkbox"))
Error.appendto (Element.parent ());
else if (element.is ("Input[name=captcha]"))
Error.appendto (Element.parent ());
Else
Error.insertafter (Element);
},
Success:function (label) {
Label.html (" "). AddClass ("right");
}
});
$ ("#getcode"). Click (function () {
$imgstr = "getcode.php?randcode=" +math.random ();
$ (this). attr ("src", $imgstr);
});
$ ("Input:reset"). Click (function () {
Validate.resetform ();
});
});
</script>
<body> <div class= "Demo" >
<p> Note: The following form is for learning and communication only, Shuro ' s blog site will not record user input information, please feel free to use. </p>
<form id= "MyForm" action= "#" method= "POST" >
<table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" class= "mytable" >
<tr class= "Table_title" >
<TD colspan= "2" >jquery.validation form verification </td>
</tr>
<tr>
<TD width= "22%" align= "right" > Username:</td>
<td><input type= "text" name= "user" id= "user" class= "input required"/>
<p> user name is 3-16 characters, can be numbers, letters, underscores, and Chinese </p></td>
</tr>
<tr>
<TD align= "Right" > Password:</td>
<td><input type= "password" name= "pass" id= "pass" class= "input required"/>
<p> min Length: 6 Maximum length:16</p>
</td>
</tr>
<tr>
<TD align= "Right" > Confirm password:</td>
<td><input type= "Password" name= "repass" class= "input Required"/></td>
</tr>
<tr>
<TD align= "right" > Sex:</td>
<td><input type= "Radio" name= "Sex" value= "1"/> male <input type= "Radio" name= "Sex" value= "0"/> Female </td& Gt
</tr>
<tr>
<TD align= "right" >E-mail:</td>
<td><input type= "text" name= "email" class= "input Required"/></td>
</tr>
<tr>
<TD align= "Right" > Fixed telephone:</td>
<td><input type= "Text" name= "tel" class= "input required"/>
<p> format such as:021-12345678</p></td>
</tr>
<tr>
<TD align= "Right" > Mobile number:</td>
<td><input type= "text" name= "phone" class= "input Required"/></td>
</tr>
<tr>
<TD align= "right" > website:</td>
<td><input type= "text" name= "url" class= "Input Required" value= "http://"/></td>
</tr>
<tr>
<TD align= "Right" > Birth date:</td>
<td><input type= "text" name= "Birthday" class= "input required"/>
<p> format such as:1990-10-01</p></td>
</tr>
<tr>
<TD align= "Right" > Working life:</td>
<td><input type= "text" Name= "Years" class= "input Required"/></td>
</tr>
<tr>
<TD align= "Right" > ID number:</td>
<td><input type= "text" name= "Idcard" class= "input Required"/></td>
</tr>
<tr>
<TD align= "Right" > Area:</td>
<td><select name= "Address" class= "required" >
<option value= "" > Please select </option>
<option value= "1" > Beijing </option>
<option value= "2" > Shanghai </option>
<option value= "3" > Guangzhou </option>
<option value= "4" > Shenzhen </option>
</select></td>
</tr>
<tr>
<TD align= "Right" > Zip code:</td>
<td><input type= "text" name= "ZipCode" class= "input Required"/></td>
</tr>
<tr>
<TD align= "Right" > Upload avatar:</td>
<td><input type= "file" name= "photo" class= "required"/>
<p> picture for jpg,gif or PNG format </p></td>
</tr>
<tr>
<TD align= "Right" > Server ip:</td>
<td><input type= "text" name= "ServerIP" class= "input Required"/></td>
</tr>
<tr>
<TD align= "right" > </td>
<td><input type= "checkbox" Name= "Low" class= "required"/> I have read and accepted the user agreement
</td>
</tr>
<tr>
<TD align= "Right" > Verification Code:</td>
<td><input type= "text" name= "captcha" class= "input Required" style= "width:80px;"/>
</td>
</tr>
<tr>
<TD height= "> </td>"
<td><input type= "Submit" class= "BTN" value= "submitted"/> <input type= "reset" class= "BTN" value= "reset"/></td>
</tr>
</table>
</form>
</div>
</div> |
