Verify the operation class formValidatorClass. js
Copy codeThe 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 codeThe 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 );
}
}