jquery Form Plug-in

Ext.: http://www.cnblogs.com/similar/p/3891284.html

Form validation in the project or more, the company is currently doing the project will be used, so write this plugin, first of all to see the application of the project:

Directly on the plug-in implementation of the code, around the code to explain the more easy point:

/* Description: jquery-based form validation plug-in. Time: 2014-8-3similar ([email protected]) */(function ($) {$.fn.checkform = function (options) {var root = this;// The current application object is stored in root var isOK = false; Control the form submitted by the switch Var pwd1; Password Store
        var defaults = {//Picture path Img_error: "Img/error.gif", img_success: "Img/success.gif ",//Prompt message tips_success: ',//Prompt for verification success, default is null tips_required: ' cannot be empty ', Tips_emai            L: ' Email address format is incorrect ', Tips_num: ' Please fill in the number ', Tips_chinese: ' Please fill in Chinese ', Tips_mobile: ' The cell phone 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[3458]{1}[0-9]{9}$/,//Verify phone REG_IDCA        RD:/^\d{14}\d{3}?\w$///Authentication ID};        If not null then merge parameters if (options) $.extend (defaults, options); Get (text box, password box, multiline text box), data validation $ (": text,:p Assword,textarea", root) when the focus is lost. each (function () {$ (This). blur (function () {var _validate = $ (this). attr ("check");//Gets the value of the Check property if (_validate) {var arr = _validate.split (');//split it into an array with a space for (var i = 0; i < arr.length; I + +) {//Verify one by one, do not bounce back by false, then continue if (!check ($ (this), Arr[i], $ (this). Val ())                        ) return false;                    else continue;            }})})//validation is performed on the form submission, basically the same as above, except that the function _onsubmit () is triggered when the form is submitted () {            isOK = true;                $ (": text,:p Assword,textarea", root). each (function () {var _validate = $ (this). attr ("check");                    if (_validate) {var arr = _validate.split (');                            for (var i = 0; i < arr.length; i++) {if (!check ($ (the), Arr[i], $ (this). Val ())) { isOK =False Verify that the switch is not committed by blocking the form, false return;        Jump}}); }//To determine if the current object is a form, and if it is a form, commit to validate if (root.is ("form")) {Root.submit () {_                OnSubmit ();            return isOK; })}//validation method var check = function (obj, _match, _val) {
　　　　　　　According to the verification situation, display the corresponding prompt message, return the corresponding value switch (_match) {case ' required ': return _va L?                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 ' 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 Get 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;  }}//To determine if two times the password is consistent (return bool value) var pwdequal = function (Val1, val2) {return val1 = = Val2? True        : false;        }//Regular match (return bool value) var chk = function (str, REG) {return reg.test (str);            }//Display information var showmsg = function (obj, MSG, Mark) {$ (obj). Next ("#errormsg"). Remove ();//Clear First var _html = "<span id= ' errormsg ' style= ' font-size:13px;color:gray;background:url (" + Defaults.img_error + ") no-re Peat 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 notes have been explained most of the content, and most people understand it at a glance.

Implementation principle:

First define the regular, and the corresponding prompt information,

Plus the custom Check property,

The value of the Check property is then obtained, and multiple values are separated by a space. Use Split () to split it into arrays, which are validated by calling the check () method one by one.

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

Here are two validations that are more specific, namely:

1. Verify that it is empty (required)

2. Two times the password is consistent (PWD2)

Neither of these two uses the 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 extended to add their own.

Expansion takes only 3 steps:

1. Add a regular,

2. Add the appropriate message,

The 3.check () method adds the appropriate case processing

Plugin usage Instructions:

1. Add a custom check property to the text box, password box, and multiline text box under the form to be validated

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

3. If you want to verify that two passwords are consistent, PWD1 and PWD2 are used together, such as:

PWD1 stores the value of the first input, PWD2 stores the value of the second input, if you only use pwd1 OK.

However, if only pwd2 is used, the validation is not always possible.

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 slices:
The sample code, the successful commit will jump to the success.html page, so you have to create a success.html, inside can not write anything.
However, as long as there is a validation that does not pass, the jump will not succeed.
In addition, you may need 2 more pictures:
Picture path Img_error: "Img/error.gif", img_success: "Img/success.gif",

  Upload it here, and right-click Save As.
The language does not learn well, the organization ability, and the ability to express is lack. I understand, but can not be very good to speak out, helpless.
If you do not understand what you can leave a message, or the above code has any suggestions also please leave a message (discuss the best results), or found a bug, trouble in time to inform, thank you!
jquery Form Plug-in