Jquery Simple Form Verification example _ jquery

This article recommends a simple example of jquery form verification. If you need a simple example, you can refer to the example in this article to describe jquery Form Verification code. Share it with you for your reference. The details are as follows:
The running effect is as follows:

The Code is as follows:

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

/* Description: jquery-based form verification plug-in. */(Function ($) {$. fn. checkForm = function (options) {var root = this; // Save the current application object to root var isok = false; // control the switch var pwd1 submitted by the form; // password store var defaults = {// image path img_error: "img/error.gif", img_success: "img/success.gif", // The 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 id', tips_mobile: 'incorrect Mobile Phone Number Format ', tips_idcard: 'incorrect ID card number format', Tips_pwdequal: 'inconsistent passwords ', // 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: /^ [\ u4E00-\ 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, 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 = "" + msg + ""; if (mark) _ html = "" + msg + ""; $ (obj ). after (_ html); // Add return mark; }}) (jQuery );

　　

Let's talk about it first.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. If you only use pwd1, but if you only use pwd2, verification will never pass.

The DEMO code is as follows:

  Form Verification plug-in