JQuery表单验证插件

作者：蒋固金 日期：2013-06-18

引入的插件

jquery-1.4.2.js

jquery.validate.js(jquery.validate.min.js) jquery.metadata.js messages_cn.js

messages_cn.js源文件

jQuery.extend(jQuery.validator.messages, { required: \"必选字段\", remote: \"请修正该字段\",

email: \"请输入正确格式的电子邮件\", url: \"请输入合法的网址\", date: \"请输入合法的日期\",

dateISO: \"请输入合法的日期 (ISO).\", number: \"请输入合法的数字\", digits: \"只能输入整数\",

creditcard: \"请输入合法的信用卡号\", equalTo: \"请再次输入相同的值\",

accept: \"请输入拥有合法后缀名的字符串\",

maxlength: jQuery.validator.format(\"请输入一个长度最多是 {0} 的字符串\"),

minlength: jQuery.validator.format(\"请输入一个长度最少是

{0} 的字符串\"),

rangelength: jQuery.validator.format(\"请输入一个长度介于 {0} 和 {1} 之间的字符串\"),

max: jQuery.validator.format(\"请输入一个最大为 {0} 的值\"), min: jQuery.validator.format(\"请输入一个最小为 {0} 的值\"), range: jQuery.validator.format(\"请输入一个介于 {0} 和 {1} 之间的值\") });

根据messages_cn.js的信息，我们可以对对应的提示信息进行修改，如email验证不通过时，将提示信息修改成：请输入正确格式的电子邮箱，其他提示信息与此相同，示例代码如下： jQuery.extend(jQuery.validator.messages, { email: \"请输入正确格式的电子邮箱\" });

简单调用

$(function () {

$(\"#signupForm\").validate(); });

扩展参数，配置验证规则，提示信息

规则与信息可以在JQuery代码中配置，也可以使用JSON格式放在表单元素的class中

JQuery核心代码

var form;//定义表单变量

$(function () {

form = $(\"#signupForm\").validate({ rules: {//验证规则

firstname: { required:true}, email: {required:true, email:true}, password: {required:true, minlength:5}, confirm_password: minlength:5,equalTo:\"#password\"} },

messages: {//验证提示信息

firstname:{required:\"请输入姓名\"},

email: {required:\"请输入Email地址\", email:\"请输入正确的email地址\"}, password:

{required:\"

请

输

入

密

码

{required:true,

\",minlength:jQuery.format(\"密码不能小于{0}个字符\")},

confirm_password: {required:\"请输入确认密码\",minlength:\"确认密码不能小于5个字符\", equalTo:\"两次输入密码不一致\"} },

submitHandler: function (form) {//表单提交回调函数 alert(\"验证通过\"); form.submit();

} }); });

HTML表单代码

扩展参数，自定义验证规则

// 字符验证，自定义验证规则，用户名只能为为汉字或字符 jQuery.validator.addMethod( \"userName\//验证方法名称

function (value, element) {//验证函数 return

this.optional(element)

||

/^[\Α-\￥\\w]+$/.test(value); },

\"用户名只能包括中文字、英文字母、数字和下划线\"//验证提示信息 )

使用自定义验证规则

rules: {

firstname: { required: true,userName: true }, ...... },

扩展参数，通过服务器验证，注意，服务器只能返回true/false

rules: {

firstname: { required: true, userName: true, remote: {

url: \"ServletURL\//后台处理程序 type: \"get\//数据发送方式 dataType: \"json\//接收数据格式 data: {//要传递的数据 firstname:

function

()

{

return

$(\"#firstname\").val(); }//只能以函数的格式提供值 } } }, ...... }