Verify the operation class formvalidatorclass. js
CopyCode The Code is as follows :/**
* @ Author Ming
*/
$ (Document). Ready (function (){
/** // * Set the default attribute */
$. Validator. setdefaults ({
Submithandler: function (form ){
Form. Submit ();
}
});
// Character Verification
Jquery. validator. addmethod ("stringcheck", function (value, element ){
Return this. Optional (element) |/^ [\ u0391-\ uffe5 \ W] + $/. Test (value );
}, "Can only contain Chinese characters, English letters, numbers, and underscores ");
// Two Chinese characters
Jquery. validator. addmethod ("byterangelength", function (value, element, Param ){
VaR length = value. length;
For (VAR I = 0; I <value. length; I ++ ){
If (value. charcodeat (I)> 127 ){
Length ++;
}
}
Return this. Optional (element) | (length> = Param [0] & length <= Param [1]);
}, "Please make sure that the input value is between 3-15 bytes (one text is counted as 2 bytes )");
// ID card number verification
Jquery. validator. addmethod ("isidcardno", function (value, element ){
Return this. Optional (element) | isidcardno (value );
}, "Enter your ID card number correctly ");
// Mobile phone number verification
Jquery. validator. addmethod ("ismobile", function (value, element ){
VaR length = value. length;
VaR mobile =/^ (13 [0-9] {1}) | (15 [0-9] {1}) + \ D {8 }) $ /;
Return this. Optional (element) | (length = 11 & mobile. Test (value ));
}, "Please enter your mobile phone number correctly ");
// Phone number verification
Jquery. validator. addmethod ("istel", function (value, element ){
VaR Tel =/^ \ D {3, 4 }-? \ D {7, 9} $/; // Phone Number Format: 010-12345678
Return this. Optional (element) | (Tel. Test (value ));
}, "Please enter your phone number correctly ");
// Contact number (mobile phone/phone) Verification
Jquery. validator. addmethod ("isphone", function (value, element ){
VaR length = value. length;
VaR mobile =/^ (13 [0-9] {1}) | (15 [0-9] {1}) + \ D {8 }) $ /;
VaR Tel =/^ \ D {3, 4 }-? \ D {7, 9} $ /;
Return this. Optional (element) | (Tel. Test (value) | mobile. Test (value ));
}, "Please enter your contact number correctly ");
// Postal code verification
Jquery. validator. addmethod ("iszipcode", function (value, element ){
VaR Tel =/^ [0-9] {6} $ /;
Return this. Optional (element) | (Tel. Test (value ));
}, "Please enter your zip code correctly ");
// Start Verification
$ ('# Submitform'). Validate ({
/** // * Set verification rules */
Rules :{
Username :{
Required: True,
Stringcheck: True,
Byterangelength: [3, 15]
},
Email :{
Required: True,
Email: True
},
Phone :{
Required: True,
Isphone: True
},
Address :{
Required: True,
Stringcheck: True,
Byterangelength: [3,100]
}
},
/** // * Set the error message */
Messages :{
Username :{
Required: "Enter the user name ",
Stringcheck: "The user name can only contain Chinese characters, English letters, numbers, and underscores ",
Byterangelength: "The user name must be 3-15 characters long (one Chinese character is counted as 2 characters )"
},
Email :{
Required: "enter an email address ",
Email: "enter a valid Email Address"
},
Phone :{
Required: "Enter your contact number ",
Isphone: "enter a valid contact number"
},
Address :{
Required: "Enter your contact address ",
Stringcheck: "Please enter your contact address correctly ",
Byterangelength: "Please provide your contact address so that we can contact you"
}
},
/** // * Set the verification trigger event */
Focusinvalid: false,
Onkeyup: false,
/** // * Set the error message prompt Dom */
Errorplacement: function (error, element ){
Error. appendto (element. Parent ());
},
});
});
Test page index.html Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"
Http://www.w3.org/TR/html4/loose.dtd>
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK"/>
<Title> jquery verification </title>
<SCRIPT src = "lib/jquery/jquery-1.3.2.min.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "lib/jquery. Validate. js" mce_src = "lib/jquery. Validate. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "lib/jquery/messages_cn.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "lib/jquery/formvalidatorclass. js"> </SCRIPT>
<Style type = "text/CSS">
*{}{
Font-family: verdana;
Font-size: 96%;
}
Label {}{
Width: 10em;
Float: left;
}
Label. error {}{
Float: none;
Color: red;
Padding-left:. 5em;
Vertical-align: top;
}
P {}{
Clear: both;
}
. Submit {}{
Margin-left: 12em;
}
Em {}{
Font-weight: bold;
Padding-Right: 1em;
Vertical-align: top;
}
</Style>
</Head>
<Body>
<Form class = "submitform" id = "submitform" method = "get" Action = "">
<Fieldset>
<Legend> Form Verification </legend>
<P>
<Label for = "username"> User Name </label>
<Em> * </em> <input id = "username" name = "username" size = "25"/>
</P>
<P>
<Label for = "email"> email </label>
<Em> * </em> <input id = "email" name = "email" size = "25"/>
</P>
<P>
<Label for = "phone"> contact number </label>
<Em> * </em> <input id = "phone" name = "phone" size = "25" value = ""/>
</P>
<P>
<Label for = "Address"> address </label>
<Em> * </em> <input id = "Address" name = "Address" size = "22">
</P>
<Input class = "Submit" type = "Submit" value = "Submit"/>
</P>
</Fieldset>
</Form>
</Body>
</Html>
Validation rule parameters
The format is; Name: {rule1, rule2...} name should use the name of the input tag. The error is interpreted as ID;
Prompt message Output Using alert:Copy codeThe Code is as follows: errorplacement: function (error, element ){
If (error [0]. textcontent ){
Alert (error [0]. textcontext );
}
Else {
Alert (error [0]. innertext );
}
}
