Official Use document: http://jqueryvalidation.org/documentation/
Reference: http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
Import JS files remember to use compressed. Min JS relies on jquery version in 1.11.1 No problem other versions are not tested
<script type= "Text/javascript" src= "/js/jquery-1.11.1.js" ></script> <script type= "text/ JavaScript "src="/js/jquery.validate.js "></script>
The HTML structure is made using the thinkphp framework.
<div class= "w100 register-bg" > <div class= "w1200 Center Register-block" > <div C lass= "Register-div" > <form action= "{: U (' Service/reg/index ')}" method= "Post" class= "Reg-form" id = "Register" > <fieldset style= "border:0px;" > <legend class= "UI Header" > User registration <a href= "{: U (' Login /index ')} "target=" _self "> Existing account login </a> </legend> <p class= "field" > <label> user name:</label> <input Id= "name" name= "name" type= "text" placeholder= "User name" class= "User-name" > <span>< /SPAN> </p> <p class= "field" > <label> Password:</label> <Input id= "PW" name= "PW" type= "password" placeholder= "password" class= "USER-PW" > </p> <p class= "field" > <label> repeat Password:</label> <input id= "AGAINPW" name= "AGAINPW" type= "password" placeholder= "Repeat password" class= "USER-RE-PW" > </p> <p class= "field" > <label& gt; Email:</label> <input id= "Emali" name= "email" type= "text" placeholder= "Mailbox" class= " User-email "> </p> <p class=" checkbox "> <input type= "checkbox" Name= "read" value= "1" class= "User-read" > < Label for= "read" placeholder= "User Agreement Selection" > I have read agree to star Yao Gakuen <a href= "" target= "_blank "> User Agreement" </a> </label> </p> <p class= "field" > <button type= "Submit" class= "Register-button" & gt; Register </button> </p> </fieldset> < ;/form> </div> </div> </div>
How to use:
The most basic is the form ID to perform validate function validation
<script type= "Text/javascript" > $ (document). Ready (function () { $ ("#register"). Validate ({ }); }) </script>
Remote Use instances
Official Introduction http://jqueryvalidation.org/remote-method/
Note that the remote write in the validation field inside the rules field such as name under the Name field in the HTML property ID and the Name property value is this
Messages field name add remote behind direct prompt text
Back end is the string true or fales see JS source looks like the comparison is true
$ (document). Ready (function () {$ ("#register"). Validate ({/* debug:true,*/ Errorclass: ' X-error ', errorelement: ' div ',/* error message display location */ Errorplacement:function (error,element) {error.appendto (Element.parent (). Find (' label ')) }, rules:{name:{required:true, Minlength:4, rangelength:[4,10], REM ote:{URL: ' {: U ("Service/validata/checkusername")} ', Type: ' Post ', data:{name:function () { return $ (' #name '). Val (); } }}}, pw:{ Required:true, Minlength:8, Rangeleng TH:[8,16]}, againpw:{required:true, Minlength:8, rangelength:[8,16], Equalto: "#againpw"}, email:{re Quired:true, Email:true, remote:{ URL: ' {: U ("Service/validata/checkemail")} ', type: ' Post ', data:{email:function () {RE Turn $ (' #email '). Val (); } } } }, agreement:{Required:true }}, messages:{name:{ Required: "Please enter user name", minlength: "User name is at least 4 characters", rang Elength: "User name is 4-10 characters", Remote: "User name has been registered"}, pw:{Required: "Please enter password", minlength: "Minimum password 8", Rangelength: "Please enter 8-bit to 16-bit password"}, againpw:{ Required: "Please enter the confirmation password", minlength: "Confirm password minimum 8-bit", Rangelength: "Please enter 8 bits to16-digit password ", Equalto:" Two times input password inconsistent "}, email: {Required: "Please enter email", Email: "Please enter a valid email address", Remote: "The mailbox has been registered!" "}, agreement:{required:" Does not agree that the star Yao Gakuen Agreement does not Can register! " } } }); })
Validation rules
rules:{ name:{ required:true, minlength:4, rangelength:[4,10], remote:{ url: ' {: U (" Service/validata/checkusername ")} ', type: ' Post ', data:{ name:function () { return $ (' #name '). Val ( ); } } } }}
Hint text
messages:{ name:{ Required: "Please enter user name", minlength: "User name is at least 4 characters", rangelength: "User name is 4-10 characters", Remote: "User name has been registered" }}
Background PHP thinkphp Framework The parameters that are accepted here are the parameters in the front-end remote data
Public Function Checkusername () {
$name = I (' name ', 0);//Here name is the data parameter sent by JS remote
if ($name = = "0") {
echo "false";
}else{
$Member = M (' Admin_member ');
$s = $Member->where (Array (admin_name=> $name))->select ();
echo $s = = null? " True ":" false ";
}
}
Public Function Checkemail () {
$email = I (' email ', 0);
if ($email = = "0") {
echo "false";
}else{
$Member = M (' Admin_member ');
$s = $Member->where (Array (email=> $email))->select ();
echo $s = = null? " True ":" false ";
}
}
Want to see the front desk return what can be found in the source Jquery.validate.js remote in the $.ajax success return parameters response output This value can be seen in the browser
Error message Settings
Errorclass prompt for incorrect class name errorelement the element that prompts for the error message is automatically added back errorplacement is where to put the error message
Errorclass: ' X-error ', errorelement: ' div ', /* error message Display location * /errorplacement:function (error,element) { error.appendto (Element.parent (). Find (' label ') },
Here are the field validation rules
such as the Name field
It is commonly used that you must fill in at least 4 bits (for example) to enter 4-10 strings (for example)
Required:true must be filled minlength:4 minimum input 4 characters rangelength:[4,10] Enter 4-10 ranges of characters these are written in the rules.
name:{ required:true, minlength:4, rangelength:[4,10], remote:{ url: ' {: U ("Service/validata /checkusername ")} ', type: ' Post ', data:{ name:function () { return $ (' #name '). Val (); }} },
Hint text written in messages corresponding validation properties required minlength Rangelength remote fill in the corresponding information can be
name:{ Required: "Please enter user name", minlength: "User name is at least 4 characters", Rangelength: "username is 4-10 characters", Remote: "User name has been registered" },
View verification method go directly to the source search methods
Verify that the checkbox must be selected
Html
<p class= "checkbox" > <input type= "checkbox" name= "agreement" value= "1" class= "User-read" id= "agreement" > <label for= "agreement" placeholder= "User Agreement Selection" > I have read consent to star Yao Gakuen <a href= "target=" _blank > User Agreement </a> </label> </p>
Validation rules
agreement:{ required:true }
Other reference URLs
Http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
Validate jquery Registration Page Use example detailed