JQuery-based universal front-end data verification Library

As a result, I began to summarize it in the previous development. I also wrote some scattered methods to make it easier and write less code to complete more verification. The previous idea was to pass the parameter and pass in the ID of the control to be verified. If you want to verify the data format, then pass in the corresponding regular expression. After the project is completed, we can summarize the entire project and find that this writing method does not save much code, in addition, many people say that the library I wrote is not very useful. Although there are instructions, they still cannot understand it well and cannot get started quickly, there should also be a lot of bugs, so in many places they would rather use the one-to-one verification method for each control. In a JS file, 200 or 300 lines of code are required for the part in the light verification, it is also relatively lazy, so you can write less comments, so that it is very troublesome to maintain the comment after a problem occurs, and JS debugging does not have a very convenient tool.
Recently, I was also on a business trip. When I was idle, I was wondering if I could encapsulate a little more on the basis of the previous one and make it easier to call it. It is best not to write JS Code when calling it. Think of jQuery's powerful selector, as well as some custom attributes that are often added to the page element when performing verification or when you need to take the page value. Therefore, when you want to perform verification, you only need to add several custom attributes to the element and call the JS Code. This should be the simplest.
This simple verification library should be able to complete basic verification of 90%, including verification when the focus is lost, and verification when you click the submit button. I can't do it at the backend. I can only write it for anyone who uses it :).
Let's start with the code called in the previous section. The JS Code is rarely mentioned, so we won't post it directly. The attachment will be added later in the article, it also contains a JS file that I previously wrote to simulate Renren's plug-in.
Copy codeThe Code is as follows:
<Script src = "Js/jquery-1.4.2.min.js" type = "text/javascript"> </script>
<Script src = "Js/ks. ext. msgbox. js" type = "text/javascript"> </script>
<Script src = "Js/validata. js" type = "text/javascript"> </script>
<Form name = "form1" id = "form1" action = "#" method = "post">
Email Box: <input type = "text" id = "email" name = "email"
Validata = "email" errormsg = "Incorrect email format" emptyerrormsg = "email cannot be blank" empty = "false"/> <br/>
Mobile: <input type = "text" name = "phone" validata = "phone"
Errormsg = "Incorrect mobile phone format" emptyerrormsg = "mobile phone cannot be blank" empty = "true"/> <br/>
Tel: <input type = "text" name = "tel" validata = "tel"
Errormsg = "Incorrect phone format" emptyerrormsg = "phone cannot be blank" empty = "true"/> <br/>
Body certificate: <input type = "text" name = "idcard" validata = "idcard" errormsg = "Incorrect ID card format"
Emptyerrormsg = "ID card cannot be blank" empty = "false"/> <br/>
Password: <input type = "password" name = "pwd" validata = "empty"
Empty = "false" emptyerrormsg = "the password cannot be blank"/> <br/>
Confirm password: <input type = "password" name = "pwd1" validata = "password2" errormsg = "Confirm password cannot be blank"
Diffmsg = "two different passwords"/> <br/>
<Input type = "submit" id = "submit1" value = "Submit"/>
</Form>

For example, verify email:
Sometimes the mailbox is allowed to be empty, but once the mailbox is entered, the mailbox is required to be legal. If it is allowed to be null, empty is assigned a value of true, so the validation library will not perform non-empty verification on it. If it is false or the empty attribute is not added, it is not allowed to be blank by default. An emptyErrorMsg attribute is not allowed to be null to display the error message when it is null. If this attribute is missing or the value is null, a red "*" is displayed "*", if it is not empty, the value of this attribute is displayed. Then, verify the format, verify the email address, and the value of validata is email. If it is invalid, the value of errorMsg of another custom attribute is displayed, if errorMsg is missing or empty, the error message is red "*".
The value of validata cannot be completely customized. It has been customized in JS. Return different regular expressions based on the value of validata. The method is as follows, and the optional value of validata is the value of regName of the following method. You can simply add other expressions to the data presentation.
Copy codeThe Code is as follows:
// Return the corresponding regular expression based on the verification content
Function returnRegString (regName ){
If (regName = "email "){
Return "^ ([a-zA-Z0-9 _\. \-]) + \ @ ([a-zA-Z0-9 \-]) + \.) + ([a-zA-Z0-9] {2, 4}) + $ "; // mailbox
} Else if (regName = "tel "){
Return "^ (86 )? (-)? (0 [0-9] {2, 3 })? (-)? ([0-9] {7, 8 })(-)? ([0-9] {3, 5 })? $ "; // Call
} Else if (regName = "phone "){
Return "^ (13 [0-9] | 15 [0-9] | 18 [0-9]) ([0-9] {8}) $ "; // mobile phone
} Else if (regName = "postcode "){
Return "^ ([0-9] {6}) $"; // zip code
} Else if (regName = "number "){
Return "^ (0 | ([1-9] + [0-9] *) (. [0-9] + )? $ "; // Number
} Else if (regName = "decimal "){
Return "^ [0-9] + ([.] [0-9] + )? $ "; // Floating point
} Else if (regName = "money "){
Return "^ ([0-9]) $"; // currency
} Else if (regName = "website") {// URL
Return "(http: // | https: //) {0, 1} [\ w \/\.\? \ & \ =] + ";
} Else if (regName = "fax") {// fax
Return "^ [+] {0, 1} ([0-9]) {1, 3} []? ([-]? ([0-9]) | []) {1, 12}) + $ ";
} Else if (regName = "int") {// integer
Return "^ (-) {0, 1} \ d + $ ";
} Else if (regName = "pInt") {// positive integer
Return "^ \ d + $ ";
} Else if (regName = "nInt") {// negative integer
Return "^-\ d + $ ";
} Else if (regName = "nandl") {// number and letter
Return "[a-zA-Z0-9]";
} Else if (regName = "chinese") {// whether it contains chinese Characters
Return "[\ u4e00-\ u9fa5]";
}
}

If you are not talking about this nonsense, the verification library has not been fully tested yet. If you are interested in trying it out, please tell your younger brother about any problems or other better improvement methods. Although there must be a ready-made and mature JS verification library, I want to write it myself. Next, click the button. If the verification fails, the pop-up dialog box will display a prompt indicating which part has not passed the verification. the pop-up dialog box will display the effect of the Self-written imitation Renren effect.