Jquery–jquery Validate Ajax

"LJ?" Dragon "The fish said to the water that you could not see my tears, for I was in the water." Water says I can feel your tears, because you are in my heart.
"LJ?" Dragon "You" re more than a shadow, I ' ve just to believe.
"LJ?" Dragon "A true friend is some one who reaches for your hand and touches your heart.

Jquery.validate Ajax Method Validation

<script type= "Text/javascript" > $ (Function () {$ ("#form1"). Validate ({rules: { PWD: {required:true, remote: {URL: "@Url. Action (" Validatep WD "," UserInfo ")", type: "Post", DataType: "JSON", DA　　　　TA: {pwd:function () {return $ ("#pwd"). Val ();　　　　This is the password to verify}}, Datafilter:function (data) {                            Determine what the controller returns if (data = = "true") {return true;                            } else {return false;  }}}, password: {required: True, Rangelength: [6, +]}, Confirm_password: {required:true, Rangel                Ength: [6, +], Equalto: "#password"}}, messages: { PWD: {required: "Please fill in the original password!" ", Remote:" The original password is not correct, please re-fill!                "//This place if not write, is the cue content that comes with, plus is this content." }, Password: {required: "Please fill in the new password", Minlength:jQuery.format ("Login name length is 6- Between 12 bits! ")}, Confirm_password: {required:" Please fill in the Confirmation password! " ", minlength:" The password must consist of 6-16 characters (numbers, letters, underscores)! ", Equalto:" Two times input password inconsistent!            "}}, Onfocus:true, Onkeyup:false,///This place to be aware, modify the event to verify the controller. Onsubmit:false});

2. Case studies

<script>$ (). Ready (function () {$ ("#cForm"). Validate ({onsubmit:true,//whether the commit is to verify that onfocusout:false,//is validating when the focus is taken onkeyup:false,//verify rules when tapping the keyboard: {//Rule User: {//to correspond to the name attribute in input required:true}, password: {Requir Ed:true}},messages:{//Validation error message User: {required: "Please enter user name"}, Password: {required: "Please enter password"}},submithandl Er:function (form) {//After callback//for Ajax value $.ajax ({url: "{: U (' User/index ')}", type: "Post", DataType: "JSON", data : {User: $ ("#user"). Val (), Password: $ ("#password"). Val ()}, Success:function (msg) {//code to execute}});},invali Dhandler:function (Form, validator) {return false;}}); }); </script>

2.1 Use

<script src= "Http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js" ></script>< Script src= "Http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js" ></ Script>

Rookie Tutorial: Http://www.runoob.com/jquery/jquery-plugin-validate.html

$ (). Ready (function () {//After the keyboard is pressed and released and submitted after validating the submission form $ ("#signupForm"). Validate ({rules: {firstname: "Required", last Name: "Required", Username: {required:true, minlength:2}, password: {required:tr UE, Minlength:5}, Confirm_password: {required:true, Minlength:5, Equalto: "#pas Sword "}, email: {required:true, email:true}, topic: {Required:" #newsletter : Checked ", minlength:2}, agree:" Required "}, messages: {firstname:" Please enter your name ", Lastnam        E: "Please enter your last name", Username: {required: "Please enter user name", minlength: "User name must consist of two letters"}, Password: { Required: "Please enter password", minlength: "Password length cannot be less than 5 letters"}, Confirm_password: {required: "Please enter password", m Inlength: "Password length cannot be less than 5 letters", Equalto: "Two times password input inconsistent"}, email: "Please enter a correct mailbox", agree: "Please accept our statement", top IC: "Please select two Themes"}});

The name in the validation rule must correspond to the name value in input

3. Common methods and attention issues 3.1 we can substitute the default submit in other ways

$ (). Ready (function () {$ ("#signupForm"). Validate ({        submithandler:function (form) {  //the content            to be executed after a form is submitted Form.submit ();});        

Using Ajax

$ (". Selector"). Validate ({      submithandler:function (form)    {            $ (form). Ajaxsubmit ();        }   })

3.2debug, only verify not submit form

$ (). Ready (function () {$ ("#signupForm"). Validate ({        debug:true    });});

If more than one form in a page wants to be set to debug, use:

$.validator.setdefaults ({   debug:true})

3.3ignore: Ignore certain elements without validating

Ignore: ". Ignore"

3.4 Change where error messages are displayed

Errorplacement:callback

Indicates where the error was placed, by default: Error.appendto (Element.parent ()), where the error message is placed after the element being validated.

Errorplacement:function (Error, Element) {      error.appendto (element.parent ());  }

3.5 Changing the style of error message display

Set the style of the error prompt, you can increase the icon display, in the system has established a VALIDATION.CSS, dedicated to maintain the style of the checksum file

Input.error {border:1px solid red;} Label.error {  Background:url ("./demo/images/unchecked.gif") no-repeat 0px 0px;  padding-left:16px;  padding-bottom:2px;  Font-weight:bold;  Color: #EA5200;} label.checked {  Background:url ("./demo/images/checked.gif") no-repeat 0px 0px;}

3.6 Each field is validated by executing the function

Success:function (label) {    //Set as text for IE    label.html (""). AddClass ("checked");    Label.addclass ("valid"). Text ("ok!")}

3.7 Validation of Trigger mode modification

Resetting the form is useful

$ (). Ready (function () {var validator = $ ("#signupForm"). Validate ({        submithandler:function (form) {            alert (" Submitted ");               Form.submit ();        }        });    $ ("#reset"). Click (function () {        validator.resetform ();    });});

3.8 Asynchronous authentication

Remote: {    URL: ' check-email.php ',     //spooler    type: ' Post ',               //data sent    dataType: ' json ',           // Accept data Format       : {                     //data to be passed        username:function () {            return $ ("#username"). Val ();    }}

3.9 Adding custom checksums

Addmethod:name, method, message

Chinese characters two bytes jQuery.validator.addMethod ("Byterangelength", function (value, element, param) {    var length = Value.length;    for (var i = 0; i < value.length; i++) {        if (value.charcodeat (i) > 127) {            length++;        }    }  return this.optional (Element) | | (length >= param[0] && length <= param[1]);   }, $.validator.format ("Make sure the value entered is between {0}-{1} bytes (2 bytes in one text) "));//ZIP code validation   jQuery.validator.addMethod (" Iszipcode ", function (value, Element) {       var tel =/^[0-9]{6}$/;    return this.optional (Element) | | (Tel.test (value));}, "Please fill in your zip code correctly");

Verification of 3.10radio and checkbox, select

<! DOCTYPE html>
<script>$.validator.setdefaults ({    submithandler:function () {        alert ("submitted!");    }}); $ (document). Ready (function () {    $ ("#form1"). Validate ();    $ ("#selecttest"). Validate ();}); </script>
Reference:
"...." Http://www.cnblogs.com/jingmin/p/6294982.html
Jquery–jquery Validate Ajax