Form Verification for native JS

Today, we completed a form verification function written in native Js. Also hanging in a friend's space. Address: http://www.webzhishi.com/javascript-form/

Note:

Three Interfaces

1) Add verification items

 
VaR A = validator ({"form": "validator-form", ajaxsubmit: True, beforsubmit: function () {// alert ("function executed before form submission") ;}, aftersubmit: function () {alert ("data returned after Ajax submission is:" + this. responsetext );}}). add ({"target": "username", "rule_type": "username", 'Action': '2. php', 'tids': 'What do you like '})
 

It can be chained or independently written.

 
A. Add ({"target": "password", "rule_type": "password "})
 

2) Delete verification itemsUsername is the ID of the form element.

 
A. Remove ('username ');
 

3) reset the entire form

A. Reset ();
 

 

If a page has multiple forms, you only need to useDifferent variable referencesYou can.

 
VaR A = validator ({"form": "validator-form", ajaxsubmit: True, beforsubmit: function () {// alert ("function executed before form submission") ;}, aftersubmit: function () {alert ("data returned after Ajax submission is:" + this. responsetext) ;}}); var B = validator ({"form": "validator-form2", ajaxsubmit: True, beforsubmit: function () {// alert ("function executed before form submission") ;}, aftersubmit: function () {alert ("data returned after Ajax submission is:" + this. responsetext );}})
 

 
A. User-Defined prompt information is supported.
 

 
. Add ({"target": "username", "rule_type": "username", 'tids': 'What do you mean? ', 'error': 'Alas, why did you fill in the wrong information? Is your IQ 0? '})
 

 B. Support custom rules and set their rule, but do not use rule_type at this time.

 
. Add ({"target": "password", "rule":/^ \ D {6, 11 }$ /})
 

C. Support multiple verification rules and set rule_type, which is the same as the condition judgment in Js.

 
. Add ({"target": "Age", "rule_type": "(number & range) | empty", "error": 'although this item is not mandatory, but since you have entered it, you can fill it out. '})
 

D. Support Ajax verification. Set the action ().

 
Add ({"target": "username", "rule_type": "username", 'Action': '2. php', 'tids': 'What do you want to say '})
 

E. Support for Ajax form submissionYou only need to set ajaxsubmit to true. The submission method is the form's methoed attribute. The submission address is the form's action attribute value. beforsubmit can be executed for the form to be submitted in advance, and aftersubmit callback can be executed after Ajax is submitted.

Validator ({"form": "validator-form", ajaxsubmit: True, beforsubmit: function () {// alert ("function executed before form submission ");}, aftersubmit: function () {alert ("the data returned after Ajax is submitted is:" + this. responsetext );}})
 

F. verify whether the values of the two form elements are the same. It is generally used for repeated passwords.

 
. Add ({"target": "confirm-Password", "rule_type": "password", "sameto": "password", // verify that the values of the two form elements are the same, it is generally used in the repeated password 'error': 'The password you entered is incorrect or different from the original password '})
 

G. If you do not need a prompt, add a no_tip.

 
. Add ({"target": "confirm-Password", "rule_type": "password", "no_tip": true })
 

The following is a complete example:

/*** @ Author administrator */var A = validator ({"form": "validator-form", // form idajaxsubmit: True, // submit beforsubmit in Ajax format: function () {// execute before submission // alert ("function executed before form submission") ;}, aftersubmit: function () {// run after submission. This indicates the Ajax instance alert ("the data returned after Ajax is submitted is:" + this. responsetext );}}). add ({"target": "username", // ID of the form element to be verified "rule_type": "(username & namelen) | empty ", // verification rules, which can be combined with any rule, which is the same as the 'Action' of native JS: '2. PHP ', // Ajax verification, generally used for judgment The uniqueness of the account name. The backend must return an object {ispass: True | false}; 'tids': 'What do you mean? '// custom message 'error ': 'Alas, why did you fill in the wrong information? Do you have 0 IQ? '// Custom error message }). add ({"target": "password", "rule":/^ \ D {6, 11 }$ // custom verification rules }). add ({"target": "confirm-Password", "rule_type": "password", "sameto": "password", // verify that the values of the two form elements are the same, generally, it is used in the duplicate password 'error': 'The password you entered is incorrect or different from the original password '}); // Add a verification item. add ({"target": "Age", "rule_type": "number | empty", "error": 'although this item is not mandatory, but since you have entered it, you can fill it out. ', Beforefocus: function () {}, // run when the verification element gets the focus, beforeblur: function () {}, // run when the verification element loses the focus, onkeypress: function () {}, // run when the verification element is being input and afterchange: function () {}// run when the value of the select element changes. Note that this function is only available in select

}); // Delete a verification item A. Remove ('username'); // reset Form A. Reset ();