Compile the jQuery plug-in form verification by yourself and compile the jquery plug-in form

Source: Internet
Author: User

Compile the jQuery plug-in form verification by yourself and compile the jquery plug-in form

Let's talk about it first: I am in a bad state recently. I really don't want to do anything, don't want to go to work, and I don't have the motivation to do anything. I feel boring. Don't want to do this. Don't want to do this. Just let it disappear. Suddenly ....

 

Form Verification is still used in many projects, and the company is currently using projects. Therefore, I wrote this plug-in. Let's take a look at the application in the project:

 

The code is directly implemented by the plug-in, which is easier to explain around the Code:

/* Description: jquery-based form verification plug-in. Time: Author: similar (281542025@qq.com) */(function ($) {$. fn. checkForm = function (options) {var root = this; // Save the current application object to root var isok = false; // control the switch var pwd1 submitted in the form; // Password Storage
Var defaults = {// image path img_error: "img/error.gif", img_success: "img/success.gif", // message tips_success :'', // prompt message when the verification is successful. The default value is blank. tips_required: 'cannot be blank', tips_email: 'incorrect email address format ', tips_num:' enter the number ', tips_chinese: 'Enter Chinese characters ', tips_mobile: 'incorrect Mobile Phone Number Format', tips_idcard: 'incorrect ID card number format ', tips_pwdequal: 'inconsistent passwords', // regular reg_email: /^ \ w + \ @ [a-zA-Z0-9] + \. [a-zA-Z] {2, 4} $/I, // verify the email address reg_num:/^ \ d + $/, // verify the number reg_chinese:/^ [\ u4E0 0-\ u9FA5] + $/, // verify the Chinese reg_mobile:/^ 1 [3458] {1} [0-9] {9} $ /, // verify the mobile phone reg_idcard:/^ \ d {14} \ d {3 }? \ W $ // verify the ID card}; // if (options) $. extend (defaults, options); // get (text box, password box, multi-line text box), data verification when the focus is lost $ (": text,: password, textarea ", root ). each (function () {$ (this ). blur (function () {var _ validate = $ (this ). attr ("check"); // obtain the value of the check attribute if (_ validate) {var arr = _ validate. split (''); // split it into an array with spaces (var I = 0; I <arr. length; I ++) {// verify one by one. if it fails to exit, false is returned. if it passes, if (! Check ($ (this), arr [I], $ (this ). val () return false; else continue ;}}}) // perform verification when the form is submitted, which is basically the same as the preceding method, only function _ onSubmit () {isok = true; $ (": text,: password, textarea", root) is triggered when the form is submitted ). each (function () {var _ validate = $ (this ). attr ("check"); if (_ validate) {var arr = _ validate. split (''); for (var I = 0; I <arr. length; I ++) {if (! Check ($ (this), arr [I], $ (this ). val () {isok = false; // The verification fails and the form submission is blocked. The switch is false return; // jump out }}}});} // determine whether the current object is a form. if it is a form, verify if (root. is ("form") {root. submit (function () {_ onSubmit (); return isok;})} // verification method var check = function (obj, _ match, _ val ){
// According to the verification result, the corresponding prompt is displayed, and the corresponding value switch (_ match) {case 'required': return _ val? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_required, false); case 'email ': return chk (_ val, defaults. reg_email )? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_email, false); case 'num': return chk (_ val, defaults. reg_num )? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_num, false); case 'China': return chk (_ val, defaults. reg_chinese )? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_chinese, false); case 'mobile': return chk (_ val, defaults. reg_mobile )? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_mobile, false); case 'idcard ': return chk (_ val, defaults. reg_idcard )? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_idcard, false); case 'pwd1 ': pwd1 = _ val; // real-time retrieval of the stored pwd1 value return true; case 'pwd2': return pwdEqual (_ val, pwd1 )? ShowMsg (obj, defaults. tips_success, true): showMsg (obj, defaults. tips_pwdequal, false); default: return true ;}// determine whether the two passwords are consistent (return bool value) var pwdEqual = function (val1, val2) {return val1 = val2? True: false;} // Regular Expression (return bool value) var chk = function (str, reg) {return reg. test (str);} // display information var showMsg = function (obj, msg, mark) {$ (obj ). next ("# errormsg "). remove (); // first clear var _ html = "<span id = 'errormsg 'style = 'font-size: 13px; color: gray; background: url ("+ defaults. img_error + ") no-repeat 0-1px; padding-left: 20px; margin-left: 5px; '>" + msg + "</span>"; if (mark) _ html = "<span id = 'errormsg 'style = 'font-size: 13px; color: gray; background: url (" + defaults. img_success + ") no-repeat 0-1px; padding-left: 20px; margin-left: 5px; '>" + msg + "</span> "; $ (obj ). after (_ html); // Add return mark; }}) (jQuery );

 

The comments have explained most of the content, and most people will understand it at a glance.

 

 

Implementation principle:

First, define the Regular Expression and corresponding prompt information,

Add the custom check attribute,

Then obtain the value of the check attribute. Separate multiple values with spaces. Use split () to split it into arrays and call the check () method one by one for verification.

Then, the displayed information is determined by the return value of the verification.

 

Here there are two special verifications:

1. Verify whether it is null (required)

2. Whether the two passwords are consistent (pwd2)

These two do not use regular expressions, because they are useless at all. Whether the two passwords are consistent. A separate method pwdEqual () is written ();

 

 

I only wrote a few regular expressions for the validation in the plug-in. If not, you can add them as needed.

Only three steps are required for expansion:

1. Add a regular expression,

2. Add the corresponding prompt information,

3. Add corresponding case processing in the check () method

 

Plug-in instructions:

1. Add the custom check attribute to the text box, password box, and multi-line text box under the form to be verified.

2. Separate multiple formats with spaces for verification. For example, check = "required email"

3. to verify that the two passwords are consistent, use pwd1 and pwd2 together, for example:

 

 

 

 

Pwd1 stores the value entered for the first time, and pwd2 stores the value entered for the second time. It is fine if you only use pwd1.

However, if only pwd2 is used, verification will never pass.

 

The DEMO code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <title> form Verification plug-in </title> 

Example:

 

If the sample code is successfully submitted to the success.html page, you must create a success.html file, which can contain no content.

However, as long as one verification fails, the jump will not be successful.

In addition, you may need two more images:

// Image path img_error: "img/error.gif", img_success: "img/success.gif ",

After uploading the file, right-click and save it as needed.

 

The lack of good language skills, organizational skills, and expressive skills. I understand it myself, but I cannot tell it out very well.

 

If you have any questions, please leave a message or leave a message (discuss the best results) or find bugs, thank you!

 


Jquery Form Verification plug-in

There is no problem with jquery's compatibility. It is absolutely reliable. As for its plug-in compatibility, it depends on the effect written by the author! Generally, there is no problem!
We recommend one, JQuery. validate.

Jquery Form Verification plug-in

ByteRange: [, 'utf-8']. This rule is not found in the API. It should be your custom validation rule. Make sure that it is successfully defined:

JQuery. validator. addMethod ("byteRange", function (value, element, param ){
//
}, $. Validator. format ("..."));

During the test, I took the byteRange: [3, 15, 'utf-8'] sentence and verified it successfully.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.