Universal validation library for front-end data based on jQuery_jquery

So I slowly began to summarize the previous development, and also wrote some scattered methods to make it simpler and write less code to complete more verifications. The previous idea was to pass parameters, pass in the ID of the control to be verified, and then pass in the corresponding regular expression if you want to verify the data format. After the project was completed, when I summarized the entire project, I found that this way of writing did not save much code, and in many places, students reported that the library I wrote was not very useful. Although there was an explanation, they also I still can’t understand it very well, I can’t get started quickly, and there should still be a lot of bugs, so in many places they would rather use the method of verifying each control one by one. The verification part of a JS file is just There are two to three hundred lines of code, and they are relatively lazy. They can only write one sentence less for comments, so it is very troublesome to maintain after problems occur. There is no very convenient tool for JS debugging.
I have been on a business trip recently. When I was free, I was thinking whether I could encapsulate more on the basis of the previous one and make it more convenient to call. It is best not to write JS code when calling. I think of jQuery's powerful selectors, and when doing validation or needing to get values ​​from the page, I often added some custom attributes to page elements. Therefore, when you want to perform verification, you only need to add a few custom attributes to the element and call the JS code. This should be the simplest.
This simple validation library should be able to complete 90% of basic validation, including validation when focus is lost and validation when the submit button is clicked. There's nothing I can do about the backend, I can only write it for whoever uses it :).
Let’s start with a piece of calling code. The JS code is too small, so I won’t post it directly. There is an attachment at the end of the article, which also includes a JS file that I wrote myself before for a plug-in that imitates Renren.com. .

Copy code The code is as follows:

Email:validata="email" errormsg="The email format is incorrect" emptyerrormsg="The mailbox cannot be empty" empty="false" />

Mobile phone:errormsg ="Mobile phone format is incorrect" emptyerrormsg="Mobile phone cannot be empty" empty="true" />

Telephone number:errormsg="Telephone format is incorrect" emptyerrormsg="Telephone cannot be empty" empty="true" />

ID card:emptyerrormsg="ID card cannot be empty" empty="false" />

Password Code: empty="false" emptyerrormsg="Password cannot be empty" />

Confirm password ：diffmsg="Two password inputs are inconsistent" />

For example, verify email:
Sometimes email We allow it to be empty, but once the email is entered, the email is required to be legal. If empty is allowed and the value of empty is assigned to true, then the verification library will not perform non-empty verification on it. If it is false or the empty attribute does not add a default, it means that it is not allowed to be empty. If it is not allowed to be empty, add an emptyErrorMsg attribute to display the error message when it is empty. If this attribute is missing or the value is empty, a red "*" will be displayed. If it is not empty, the value of this attribute will be displayed. . Then there is the verification of the format, which is to verify the email. The value of validata is email. If it is illegal, the value of another custom attribute errorMsg will be displayed. If errorMsg is missing or empty, the error message will also be displayed in red "*".
The value of validata cannot be completely customized, it has been customized in JS. It is to return different regular expressions based on the value of validata. The method is as follows, and the value of the optional validdata is the value of regName of the following method. If the user wants to display it, he can simply add other expressions.

Copy code The code is as follows:

//Return the corresponding regular expression according to different verification content
function returnRegString(regName) {
if (regName == "email") {
return "^([ a-zA-Z0-9_.-]) @(([a-zA-Z0-9-]) .) ([a-zA-Z0-9]{2,4}) $"; //Email
} else if (regName == "tel") {
return "^(86)?(-)?(0[0-9]{2,3})?(-)?([0- 9]{7,8})(-)?([0-9]{3,5})?$"; //Phone
} 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})$"; //Postcode
} 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") { //Website
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 integers
return "^-d $";
} else if (regName == "nandl") { //Numbers and letters
return "[ a-zA-Z0-9]";
} else if (regName == "chinese") { //Whether it contains Chinese characters
return "[u4e00-u9fa5]";
}
}

No more nonsense, the verification library has not been fully tested yet. If you are interested in trying it out, please let us know if you find any problems or other better improvement methods. Little brother. Although there must be ready-made and relatively mature JS verification libraries, I want to write one myself. Let’s take another screenshot. If the button fails to pass the verification, the pop-up layer will prompt where the verification has not passed. The pop-up layer is the pop-up layer effect that I wrote before to imitate the effect of Renren.