JQuery validation makes validation so Easy (iii)

The following code for a simple demonstration of jquery validation includes required fields, character lengths, format validation

I. Introduction of DOCUMENTS

<script src= "Js/jquery-1.8.0.min.js" type= "Text/javascript" ></script><script src= "js/ Jquery.validate.js "type=" Text/javascript "></script>

Ii. Declaration of HTML Fragments

<form action= "" id= "Jvform" > User name: <input type= "text" name= "username"/></br> Password: <input type= "PA ssWOrd "name=" password "id=" password "/></br> Confirm password: <input type=" password "name=" Confirm_password "/> </br> Place of birth: <select name= "Address" ><option value= "" >--</option><option value= "1" > Beijing </option><option value= "1" > Shanghai </option><option value= "1" > Shenzhen </option></select> </br> Mobile: <input type= "text" name= "mobile"/></br> mailbox: <input type= "text" name= "email"/>& Lt;/br> <input type= "Submit" value= "Submission"/></form>

third, error hint style

<style type= "Text/css" >label.error{font-size:12px;font-weight:normal;color: #ff0511; margin-left:10px;} </style>

Iv. Verification Code

<script type = "Text/javascript" >$ (function () {$ ("#jvForm"). Validate ({rules: {username: {///                 User name must be filled at least 3 required:true, minlength:3}, Password: {//password required at least 6 digits                 Required:true, Minlength:6}, Confirm_password: {//Password confirmation Required:true, Equalto: "#password"}, Address: {//place of birth required Requi            Red:true}, Mobile: {//Phone required verification format required:true, Mobile:true        }, Email: {//email required verification format required:true, email:true},             }, messages: {username: {required: "User name cannot be empty!", minlength: "User name at least three bit!"            }, Password: {required: "Password cannot be empty!", minlength: "Password at least six!" }, Confirm_pasSword: {required: "Password confirmation cannot be empty!", Equalto: "Two times input password inconsistent!" }, Address: {required: "Please select birth place!",}, Mobile: {required: "                The phone can't be empty! ", Mobile:" Phone format is incorrect ",}, Email: {Required:" Mailbox cannot be empty! ", Email: "The mailbox format is incorrect",},});}) </script>

because there is no mobile authentication in the jquery.validate.js, you need to add a

First find messages inside to add mobile as follows:

Messages: {required: ' This field is required. ', Remote: ' Please fix this field. ', email: ' Please enter a valid email address  . ", url:" Please enter a valid URL. ", Date:" Please enter a valid date. ", Dateiso:" Please enter a valid date (ISO). ", Number: "Please enter a valid number.", Mobile: "Fill in the correct mobile phone numbers.", digits: "pls enter only digits.", CreditCard: "OK, enter a Vali D credit card number. ', Equalto: ' Please enter the same value again. ', MaxLength: $.validator.format ("Please enter no more t Han {0} characters. "), MinLength: $.validator.format (" Please enter at least {0} characters. "), Rangelength: $. Validator.format ("Please enter a value of between {0} and {1} characters long."), Range: $.validator.format ("Please enter a VA Lue between {0} and {1}. "), Max: $.validator.format (" Please enter a value of less than or equal to {0}. "), min: $.validator.for Mat ("Please enter a value of greater than or equal to {0}.")}

then add the mobile's regular checksum in the methods

Mobile:function (value, Element) {return this.optional (element) | |/^1[3|4|5|8][0-9]\d{8}$/.test (value);}

Run effect