ASP. net mvc Jquery Validate Form Verification Methods

1. Usage overview and important usage in Jquery. Validate 1. Common forms are combined with Jquery. Validate verification methods to verify the user name, age, and zip code. Copy the following code in the html form: 1 <form id = "addForm" method = "post" action = "/JQValidate/AddForm"> 2 <div> 3 name: 4 <input type = "text" name = "txtName" id = "txtName"/> 5 <span class = "errorMsg"> location of error messages </span> 6 <br/> 7 age: 8 <input type = "text" name = "txtAge"/> 9 <span class = "errorMsg"> </span> 10 <br/> 11 zip code: 12 <input type = "text" name = "txtZipCode"/> 13 <span class = "errorMsg"> </span> 14 </div> 15 <div> 16 <input type = "subm It "value =" Submit "/> 17 </div> 18 </form> copy the code Jquery. Validate JS verification copy code 1 <script src = "~ /Scripts/jquery-1.7.1.js "> </script> 2 <script src = "~ /Scripts/jquery. validate. js "> </script> 3 <script type =" text/javascript "> 4 $ (function () {5 // Form Verification 6 formValidate (); 7 }); 8 9 var formValidate = function () {10 // Add custom verification (ZIP code verification) 11 jQuery. validator. addMethod ("isZipCode", function (value, element) {12 var zipCode =/^ [0-9] {6} $/; 13 return this. optional (element) | (zipCode. test (value); 14}, "Please enter your zip code correctly"); 15 16 $ ("# addForm "). validate ({// # JQFor M is the ID17 rules: {18 txtName: {// id19 required: true of the form to be verified, // is it required? 20 minlength: 2, // The minimum length 21 remote: "/JQValidate/ValidateName", // if true is returned, the error message 22}, 23 txtAge: {24 required: true, 25 range: [18, 30] 26}, 27 txtZipCode: {28 required: true, 29 isZipCode: true, 30}, 31}, 32 messages: {// if no error message is displayed, the default message 33 txtName: {34 required: "Enter the member name" is displayed ", // If the prompt text 35 minlength is not entered during submission: "The length of the member name cannot be less than two characters", // If the input length is less than 2, the prompt text 36 remote: "Duplicate username" 37}, 38 txtAge: {39 required: "Age cannot be blank", 40 range: "The age range is 18 ~ 30 "41}, 42 txtZipCode: {43 required:" Zip Code cannot be blank ", 44}, 45}, 46 errorPlacement: function (error, element) {// location of the custom error message: 47 error. appendTo (element. next ("span"); 48}, 49}) 50}; 51 </script> copy Code 2. add custom verification to add a custom zip code as an Example 1 // Add custom verification (ZIP code verification) 2 jQuery. validator. addMethod ("isZipCode", function (value, element) {3 var zipCode =/^ [0-9] {6} $/; 4 return this. optional (element) | (zipCode. test (value); 5}, "Please enter it correctly Your zip code "); 3. place the error message in a custom area. Sometimes, to ensure that the html structure is not changed, developers need to customize the location of the error message. For example, the artist's html form structure: 1 Name: 2 <input type = "text" name = "txtName" id = "txtName"/> 3 <span class = "errorMsg"> location of the error message </span> copy the code 1 $ ("# addForm "). validate ({// # JQForm is the ID2 rules :{}, 3 messages :{}, 4 errorPlacement: function (error, element) of the form) {// location of the custom error message 5 error. appendTo (element. next ("span"); 6}, 7}) Copy code 4. if the return value of remote verification is true, an error message is displayed. Otherwise, 1 remote: "/JQValidate/ValidateName" is not displayed. // if true is returned, an error message is displayed, by default, the value of the current verification is passed to the backend verification. If other parameters are required to be passed in this form (dataType must be of the json type), copy code 1 remote: {// by default, the value of the current verification will be uploaded to the background verification. If other parameters need to be transmitted, add 2 url: "/JQValidate/ValidateName", 3 type: "post", 4 data: {"testData": "testName"}, 5 dataType: "json", // The return type must be JSON6}