The verification form for JQuery

Simple things are repeated, long enough, to say practice makes Perfect.

It is good to do a beautiful page, but, a page In addition to write well, we need is to improve its function. Like validation of forms, this is just one of many things. Then this time with Jquery's validate plugin, to learn to record the form validation Section. hopefully, the next time you encounter writing a form verification, you can do it effortlessly.

The next step is to verify that the code shows:

1 //Identification Number Verification2JQuery.validator.addMethod ("isidno",function(value, Element) {3     varid=/^[1-9]\d{5}[1-9]\d{3} ((0\d) | ( 1[0-2]) (([0|1|2]\d) |3[0-1]) \d{3} ([0-9]| X) $/;4     return  this. Optional (element) | |id.test (value);5 });6 //Postcode Verification7JQuery.validator.addMethod ("ispostal",function(value, Element) {8     varTel =/^[0-9]{6}$/;9     return  this. Optional (element) | |(tel.test (value));Ten }); one //Mobile phone number verification aJQuery.validator.addMethod ("isphone",function(value, Element) { -     varLength =value.length; -     varMobile =/^ ((13[0-9]{1}) | ( 15[0-9]{1})) +\d{8}) $/; the     varTel =/^\d{3,4}-?\d{7,9}$/; -     return  this. Optional (element) | | (tel.test (value) | |mobile.test (value)); - }); - //Determine if the password is the same +JQuery.validator.addMethod ("issame",function(value, Element) { -     varPWD1 = document.getElementById ("Pwd1"). value; +     return  this. Optional (element) | |(pwd1.test (value)); a }); at  -JQuery.validator.addMethod ("issimliar",function(value, Element) { -     varID1 = $ ("#ID01"). Val () -     varID2 = $ ("#ID02"). Val () -     if(ID1 = =ID2) -         return true; in     return  this. Optional (element); - }); to  +  -  the //determine if the ID number is the same *JQuery.validator.addMethod ("issimliar",function(value, Element) { $     varIdno = document.getElementById ("ID01"). value;Panax Notoginseng     return  this. Optional (element) | |(idno.test (value)); - }); the  +$ (document). Ready (function(){ a$ (". form-inline"). Validate ({ theOnSubmittrue, +Debugfalse, -                  $ rules:{ $ username:{ -Requiredtrue -                          the                     }, - name:{WuyiRequiredtrue the                     }, - password:{ wuRequiredtrue -                     }, about pswconfirm:{ $Requiredtrue, -Issame:true -                          -                     }, a idno:{ +Requiredtrue, theIsidno:true -                     }, $ idnoconfirm:{ theRequiredtrue, theIssimliar:true the                     }, the mobile:{ -Requiredtrue, inIsphone:true     the                      }, the qq:{ aboutRequiredtrue the                      }, the major:{ theRequiredtrue +                           -                      }, the email:{BayiRequiredtrue, theIspostal:true the                     }, - address:{ -Requiredtrue the                          the                     }, the                                            the                 }, - messages:{ the username:{ theRequired: "user name cannot be empty" the                     },94 name:{ theRequired: "name cannot be empty" the                     }, the password:{98Required: "password cannot be empty" about                     }, - pswconfirm:{101Required: "password cannot be empty",102Issame: "password must be consistent"103                         104                     }, the idno:{106Required: "the ID number cannot be empty",107Isidno: "id card Format error"108                     },109 idnoconfirm:{ theRequired: "the ID number cannot be empty",111Issimliar: "identity card must be consistent" the                     },113 mobile:{ theRequired: "phone number cannot be empty", theIsphone: "cell Phone number format is wrong" the                      },117 qq:{118Required: "qq number cannot be empty"119                      }, - major:{121Required: "professional cannot be empty"122                          123                      },124 email:{ theRequired: "mailbox cannot be empty",126Ispostal: "bad Mailbox format"127                     }, - address:{129Required: "e-mail address cannot be empty" the                     131                     }, the                 },133Errorfunction(span) {134Span.raddclass ("error Glyphicon glyphicon-remove");135                     },136             });137            138});

In fact, the code is very simple, but it may be because you forget some of the content, so that you can write this code time is very long. Take a note here, a lot of review and consolidation!

But in fact, if you use jquery more skillfully, you may find that the above code can be more Optimized. Note that you need to write a CSS style that represents the Error.

The final effect is expressed as:

For example, the above-mentioned password verification requires the same, you can directly use equalto, without adding methods.

Use a graph to remember:

The reason for this time-consuming writing code is that there is no equals () method in js, which can be directly substituted by the = = or is () method.

finally, The JS file written in jquery also needs validate.js.

Very simple code, can not spend too much time, otherwise, others will begin to question your Ability. Come on, fighting!.

The verification form for JQuery