Jquery-mobilevalidate use of some of the experience, a small summary

In doing M station is more tangled is the form verification, unlike the PC, mobile authentication requirements plug-in smaller and lighter, more flexible, perhaps the bubble of the error hint?!

Introducing a handy mobile-side form Validation plugin: jquery-mobilevalidate:

The code is concise, easy to see, basic structure:

<form class= "Basic_form" method= "" id= "form" >
<ul class= "Info_list" >
<li>
<label for= "username" ><span>*</span> name </label>
<input type= "text" class= "name" placeholder= "Please enter" maxlength= "6" data-required= "true" data-descriptions= "username" Data-describedby= "username-description" name= "username" id= "username" >

Data-required= "true" required

data-describedby= "Username-description" Error description information token

data-descriptions= "Username" Error description information content
<div id= "Username-description" ></div>

ID indicates the location of the error message prompt
</li>
<li class= "Select_li" id= "Sex_li" >
<label for= "Sex" ><span>*</span> sex </label>
<input type= "text" class= "padding_right" readonly placeholder= "male" id= "Sex" >
<input type= "Hidden" value= "1" class= "gender" name= "sex" >

Hide Domain Submissions

</li>
<li class= "Select_li" id= "Address_li" >
<label><span>*</span> Current City </label>
<input type= "text" class= "Padding_right address" readonly name= "address" placeholder= "Province/City" data-required= "true" data-descriptions= "Address" data-describedby= "address-description" >
<div id= "Address-description" ></div>

ID indicates the location of the error message prompt
<input type= "hidden" name= "province" id= "province" >
<input type= "hidden" name= "City" id= "City" >
</li>
<li class= "Phone" >
<label><span>*</span> Phone number </label>
<span class= "Def_num" >+86</span>
<input type= "text" class= "phone1" readonly placeholder= "class=" ">
<input type= "text" class= "Phone2" name= "mobile" placeholder= "Please enter" class= "" maxlength= "one" data-validate= "phone" data-describedby= "Phone-description" >
<div id= "Phone-description" ></div>

ID indicates the location of the error message prompt
</li>
<li>
<label for= "e-mail" > Email </label>
<input type= "text" class= "name" data-validate= "email" placeholder= "Please enter" maxlength= "+" name= "email" Data-describedby= "Email-description" id= "e-mail" >
<div id= "Email-description" ></div>

ID indicates the location of the error message prompt
</li>
</ul>
<div class= "Btns clearfix" >
<input type= "reset" value= "Cancel" class= "Cancel" >
<input type= "Submit" value= "OK" class= "confirm" >
</div>
</form>

JS Basic structure

$.mvalidateextend ({
Phone: {
Required:true,
Pattern:/^0?1[3|4|5|8][0-9]\d{8}$/,
Descriptions: {
Required: ' <div class= ' field-invalidmsg ' >* Please enter your mobile phone number </div> ',
Pattern: ' <div class= ' field-invalidmsg ' >* the format of the phone number you entered is incorrect </div> ',
Valid: ' <div></div> '
}
},
Password: {
Required:true,
Pattern:/^[a-za-z0-9]{6,20}$/,
Descriptions: {
Required: ' <div class= ' field-invalidmsg ' >* Please enter password </div> ',
Pattern: ' <div class= ' field-invalidmsg ' >* the password format you entered is incorrect </div> ',
Valid: ' <div></div> '
}
}
});

$ ("#item_form"). Mvalidate ({
Type:2,

Hint error type, can be customized
Onkeyup:true,
Sendform:true,
Firstinvalidfocus:true,

Automatically get the first input without validation
Valid:function (event, options) {
When you click the Submit button, the form validates the trigger function
Alert ("Verification passed!") Next you can do what you want to do! ");
var url = $ (' #item_form '). attr ("action");
Propublic.postajax (URL, $ (' #item_form '). Serialize ());
Event.preventdefault ();
},
Invalid:function (event, status, options) {
When you click the Submit button, the form does not pass the validation trigger function
},
Eachfield:function (event, status, options) {
When the Submit button is clicked, each input field of the form triggers this function this is the current form input field, which is the jquery object
},
Eachvalidfield:function (val) {
return false;
},
Eachinvalidfield:function (event, status, options) {},
Conditional: {
Pwd2:function (val, options) {
$ ("#confirmpwd2"). Trigger ("KeyUp." + options.namespace);
return true;
},
Confirmpwd2:function (val) {
VAR flag;
return (val = = $ ("#pwd2"). Val ())? True:false;
},

Two times Password input
},
Descriptions: {
Item: {
Required: ' <div class= ' field-invalidmsg ' >* Please enter project name </div> ',
Valid: ' <div class= ' field-validmsg ' ></div> '
},
Join: {
Required: ' <div class= ' field-invalidmsg ' >* Please enter the participant ID </div> ',
Valid: ' <div class= ' field-validmsg ' ></div> '
},
Time: {
Required: ' <div class= ' field-invalidmsg ' >* Please select Time </div> ',
Valid: ' <div class= ' field-validmsg ' ></div> '
}

}

Content Error message Content
});

Jquery-mobilevalidate use of some of the experience, a small summary