jquery implementation Form Validation simple example demo _jquery

This example describes the jquery implementation form validation code. Share to everyone for your reference. Specifically as follows:
The screenshot of the running effect is as follows:

The specific code is as follows:

Directly on the plug-in implementation code, around the code to explain the easier point:

/* Description: A jquery based form verification plug-in. */function ($) {$.fn.checkform = function (options) {var root = this;///////////////////= FALSE///control Table Tanti Turn the switch var pwd1; Password store var defaults = {//Picture path Img_error: "Img/error.gif", img_success: "Img/success.gif",//hint info tips_  Success: ',//Verify success when the prompt information, the default is empty tips_required: ' cannot be empty ', Tips_email: ' Email address format is wrong ', tips_num: ' Please fill in the number ', Tips_chinese: ' Please fill in Chinese ', Tips_mobile: ' Mobile number format is wrong ', Tips_idcard: ' ID card number format is incorrect ', tips_pwdequal: ' Two times password inconsistent ',//regular reg_email:/^\ W+\@[a-za-z0-9]+\. [A-za-z] {2,4}$/i,//Verify mailbox Reg_num:/^\d+$/,//Verify digital Reg_chinese:/^[\u4e00-\u9fa5]+$/,//verify Chinese Reg_mobile:/^1[3

  458]{1}[0-9]{9}$/,//Verify the mobile phone Reg_idcard:/^\d{14}\d{3}?\w$///verify ID card};

  Not NULL to merge parameter if (options) $.extend (defaults, options); 
    Gets (text box, password box, multiline text box), when the focus is lost, data validation $ (": text,:p Assword,textarea", root). each (function () {$ (this). blur (function () { var _validate = $ (this). attr ("check"); That gets the check property.Value if (_validate) {var arr = _validate.split (');//split it into array for (var i = 0; i < arr.length; i++) {
      Verify one by one, not by jumping back to false, by continuing if (!check ($ (this), Arr[i], $ (). Val ()) returns false;
     else continue;
   }})//form submission performs validation on the same basis as the above method, except that the function _onsubmit () {isOK = True is triggered when the form is submitted;
    $ (": text,:p Assword,textarea", root). Each (the 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;//Validation not passed Block form submission, switch false return;
  Jump}}});
    //To determine whether the current object is a form, or if it is a form, to validate if (root.is ("form") {Root.submit () () {_onsubmit ()) on commit
   return isOK; }///authentication method var check = function (obj, _match, _val) {///////////////////////validation methods The corresponding value switch (_match) {CA Se ' required ': return _val? ShowMsg (obJ, Defaults.tips_success, True): ShowMsg (obj, defaults.tips_required, false); Case ' emails ': 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 ' Chinese ': 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 Fetch store 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;
  }//Judge two times password is consistent (returns BOOL value) var pwdequal = function (Val1, val2) {return val1 = = Val2? true:false;
  //Regular match (returns bool value) var chk = function (str, REG) {return reg.test (str); ///display information var showmsg = function (obj, MSG, Mark) {$ (obj). Next ("#errormsg"). Remove ()//clear var _html = "<spa n 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);

　　

First say the principle of realization:

First, define the regular, and the corresponding hint information,

Plus custom Check properties,

The value of the Check property is then obtained and multiple values are separated by a space. Use Split () to split it into an array, calling the check () method individually for validation.

The displayed information is then determined by the validated return value.

Here are two different validations that are more specific:

1. Verify is null (required)

2. Two times the password is consistent (PWD2)

Neither of these two uses a regular, because it is not used at all. Two times the password is consistent, wrote a separate method pwdequal ();

The validation in the plugin I only wrote a few, if not enough can be expanded to add themselves.

The expansion takes only 3 steps:

1. Add Regular,

2. Add the corresponding prompt information,

3.check () method to add the corresponding case processing

Plug-in usage instructions:

1. Text boxes, password boxes, multiline text boxes, and custom check properties to be validated under the form

2. Multiple format verification with space interval, such as (also verify required and mailbox): check= "required Email"

3. If you want to verify that the two passwords are consistent, PWD1 and PWD2 are used together, as shown in the following figure:

PWD1 stores the value of the first input, PWD2 stores the value of the second input, if you only use PWD1, but if you only use PWD2, the validation is never passed.

The demo sample code is given below:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

Example effect Picture:

Sample code, the successful submission will jump to the success.html page, so you have to create a success.html, which can not write anything.

However, as long as there is a validation does not pass, it will not be successful jump.

In addition, you may need 2 more pictures:

Picture path
Img_error: "Img/error.gif",
Img_success: "Img/success.gif",

Upload it here, your own right button save as bar.

This article has been organized into the "jquery form verification Encyclopedia," Welcome to learn to read.

The above is the entire content of this article, I hope to help you find a better grasp of jquery verification code implementation methods.