the use of jQuery validation framework

Mar 29 posted in Web (RSS), comments.

Advertisements

Plug-in Address: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Download: http://jquery.bassistance.de/validate/jquery.validate.zip

Demo: http://jquery.bassistance.de/validate/demo/

$ (Document). Ready (function () (

/ * Set default attributes * /
$. Validator.setDefaults ((
submitHandler: function (form) (form.submit ();)
));

/ / Two byte 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 be sure to enter the value in between 3-15 bytes (1 byte characters count 2)");

/ * Additional custom authentication method * /
/ / ID number verification
jQuery.validator.addMethod ("isIdCardNo", function (value, element) (
return this.optional (element) | | isIdCardNo (value);
), "Please enter your ID number correctly");

/ / Character verification
jQuery.validator.addMethod ("userName", function (value, element) (
return this.optional (element) | | / ^ [\ u0391-\ uFFE5 \ w ]+$/. test (value);
), "User name can only include Chinese characters, English letters, numbers and underscores");

/ / Mobile phone number validation
jQuery.validator.addMethod ("isMobile", function (value, element) (
var length = value.length;
return this.optional (element) | | (length == 11 & & /^((( 13 [0-9] (1)) | (15 [0-9] (1))) + \ d (8)) $ /. test (value));
), "Please enter your phone number correct");

/ / Phone number validation
jQuery.validator.addMethod ("isPhone", function (value, element) (
var tel = / ^ (\ d (3,4 }-?)? \ d (7,9) $ / g;
return this.optional (element) | | (tel.test (value));
), "Please enter your phone number correct");

/ / Postal Code authentication
jQuery.validator.addMethod ("isZipCode", function (value, element) (
var tel = / ^ [0-9] (6) $ /;
return this.optional (element) | | (tel.test (value));
), "Please correctly fill in your zip code");

$ (RegFrom). Validate ((
/ * Set the validation rules * /
rules: (
userName: (
required: true,
userName: true,
byteRangeLength: [3,15]
)
password: (
required: true,
minLength: 5
)
repassword: (
required: true,
minLength: 5,
equalTo: "# password"
)
question: (
required: true
)
answer: (
required: true
)
realName: (
required: true
)
cardNumber: (
isIdCardNo: true
)
mobilePhone: (
isMobile: true
)
phone: (
isPhone: true
)
email: (
required: true,
email: true
)
zipCode: (
isZipCode: true
)
)
/ * Set error message * /
messages: (
userName: (
required: "Please fill in the user name"
byteRangeLength: "User name must be between 3-15 characters (a Chinese character count two characters)"
)
password: (
required: "Please fill in the password"
minlength: jQuery.format ("Enter (0).")
)
repassword: (
required: "Please confirm your password"
equalTo: "not the same password twice"
)
question: (
required: "Please enter your password prompt question"
)
answer: (
required: "Please fill in the answer to your password prompt"
)
realName: (
required: "Please fill in your real name"
)
email: (
required: "Please enter an Email address"
email: "Please enter a valid Email address"
)
)
/ * Error message display position * /
errorPlacement: function (error, element) (
error.appendTo (element.parent ());
)
/ * Verify that the processing time of the adoption * /
success: function (label) (
/ / Set as text for IE
label.html (""). addClass ("checked");
)
/ * Gets the focus does not verify * /
focusInvalid: false,
onkeyup: false
));

/ / Input box gets the focus, style settings
$ ('Input'). Focus (function () (
if ($ (this). is (": text") | | $ (this). is (": password"))
$ (This). AddClass ('focus');
if ($ (this). hasClass ('have_tooltip')) (
$ (This). Parent (). Parent (). RemoveClass ('field_normal'). AddClass ('field_focus');
)
));

/ / Input box loses focus, the style settings
$ ('Input'). Blur (function () (
$ (This). RemoveClass ('focus');
if ($ (this). hasClass ('have_tooltip')) (
$ (This). Parent (). Parent (). RemoveClass ('field_focus'). AddClass ('field_normal');
)
));
));