不论是出于用户体验的考虑，还是出于安全角度的考虑，在网站开发过程中，涉及到表单提交时都会需要进行表单校验，而表单校验往往涉及到很多字段及规则。使用原生JS自实现一套校验框架麻烦且低效，Jquery Validation作为Jquery的一个插件，提供了非常强大而且简单易用的校验功能。
Jquery Validation核心功能我认为就分为两部分，其实校验最关心的也就这两部分：
（1）每个表单字段是校验规则是怎样的？——rules
（2）每个表单字段校验后如何提示？——messages
更进一步，有些常用的规则插件可以预先定义好，如果用户有其它特殊的需要，也支持用户自定义校验规则。校验提示又包括成功提示，以及错误提示。当然还包括一些辅助功能，比如什么时候触发校验、校验通过提交表单前做些额外的动作等等。
话不多说，下面直接示例。（关于插件的具体使用方法可以参考官网文档，或者w3cschool的使用教程。建议先看教程后再看本实用示例。）
示例校验效果如下图：
详细代码如下：
一、表单页面
页面为了样式的美观引入了bootstrap框架，同时引入的Jquery、Jquery Validation插件。主要演示的是常用校验规则的使用。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!-- Bootstrap --> <link href="statics/css/bootstrap.min.css" rel="stylesheet"> <!-- 这里引入的是校验提示的样式 --> <link href="statics/css/valid.css" rel="stylesheet"> </head> <body> <div class="container"> <form action="" id="myform" class="form-horizontal" role="form"> <fieldset class="text-center"> <legend> Jquery Validation使用示例 </legend> <div class="form-group"> <label class="col-sm-4 control-label" for="name">姓名</label> <div class="col-sm-4"> <input type="text" class="form-control" name="name" id="name"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="email">电子邮箱</label> <div class="col-sm-4"> <input type="text" class="form-control" name="email" id="email"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="url">URL地址</label> <div class="col-sm-4"> <input type="text" class="form-control" name="url" id="url"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="dateISO">日期</label> <div class="col-sm-4"> <input type="text" class="form-control" name="dateISO" id="dateISO"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="number">数字</label> <div class="col-sm-4"> <input type="text" class="form-control" name="number" id="number"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="digits">整数</label> <div class="col-sm-4"> <input type="text" class="form-control" name="digits" id="digits"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="password">密码</label> <div class="col-sm-4"> <input type="password" class="form-control" name="password" id="password"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="confPwd">再次输入密码</label> <div class="col-sm-4"> <input type="password" class="form-control" name="confPwd" id="confPwd"> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label" for="notEqualTo">输入不等于0的任意字符</label> <div class="col-sm-4"> <input type="text" class="form-control" name="notEqualTo" id="notEqualTo"> </div> </div> <div class="form-actions "> <button type="submit" class="btn btn-primary btn-large">提交</button> <button type="reset" class="btn">取消</button> </div> </fieldset> </form> </div> <!-- js --> <script src="statics/js/import/jquery-1.11.1.js"></script> <script src="statics/js/import/jquery.validate.js"></script> <script src="statics/js/import/bootstrap.min.js"></script> <!-- 这里引入的是校验提示信息的JS文件 --> <script src="statics/js/import/messages_zh.js"></script> <!-- 这里引入的是表单校验的JS文件 --> <script src="statics/js/my/myvalidation.js"></script> <!-- 这里引入的是扩展Jquery validation的自定义JS文件 --> <script src="statics/js/my/additional-methods.js"></script> </body> </html>
二、JS校验文件
$(function() {
$('#myform').validate(
{
rules : {
name : {
required : true
},
email : {
required : true,
email : true
},
url:{
required : true,
url:true,
},
dateISO:{
required : true,
dateISO:true
},
number:{
required : true,
number:true
},
digits:{
required : true,
digits:true
},
password:{
required : true,
password:true
},
confPwd:{
required : true,
password:true,
equalTo:"#password"
},
notEqualTo:{
required : true,
notEqualTo: "0"
}
},
messages:{
confPwd:{
equalTo:"与上面输入的密码不一致"
}
},
success : "valid",
errorClass:"error",
errorPlacement: function(error, element) {
error.appendTo(element.parent().parent());
}
});
});
$(function() {
//自定义密码校验规则
$.validator.addMethod("password", function(value, element, params) {
//5~10位数字和字母的组合
var pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{5,10}$/;
return this.optional(element) || pwd.test(value);
}, $.validator.format("密码必须是5~10位数字和字母的组合"));
//自定义不等于校验规则
$.validator.addMethod("notEqualTo", function(value, element, params) {
return value!=params;
}, $.validator.format("输入必须不为0"));
});
三、JS提示文件
这里定义一个统一的提示文件，在页面较多时能大大节省代码量。
$.extend($.validator.messages, {
required: "不能为空",
remote: "请修正此栏位",
email: "请输入有效的电子邮件",
url: "请输入有效的网址",
date: "请输入有效的日期",
dateISO: "请输入有效的日期 (YYYY-MM-DD)",
number: "请输入正确的数字",
digits: "只可输入数字",
creditcard: "请输入有效的信用卡号码",
equalTo: "你的输入不相同",
extension: "请输入有效的后缀",
maxlength: $.validator.format("最多 {0} 个字"),
minlength: $.validator.format("最少 {0} 个字"),
rangelength: $.validator.format("请输入长度为 {0} 至 {1} 之间的字串"),
range: $.validator.format("请输入 {0} 至 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min: $.validator.format("请输入不小于 {0} 的数值")
});
四、CSS效果
这里定义校验成功或者失败后的显示样式。
label.valid {
width: 24px;
height: 24px;
background: url(../img/valid.png) center center no-repeat;
display: inline-block;
text-indent: -9999px;
float:left;
}
label.error {
font-weight: bold;
color: red;
margin-top: 2px;
float:left;
}
示例在Chrome浏览器测试通过，完整示例请查看附件。
备注：
（1）插件还包括不少其它的功能，比如设置什么时候触发校验，忽略校验字段，表单提交前作额外的操作等等。这里只演示了最常用也是最实用的部分，其它更加全面的参考文中给出的教程地址。
（2）插件的默认校验规则中，Remote在实际实用中也经常出现，主要用于ajax请求后台判断该字段有没有重复等情况。这里由于没写后台逻辑，故没写示例。实际remote后面就是一个ajax请求方法，在后台直接返回"true"或者"false"就可以了。前后台校验的示例可以查看我的文章前后台校验示例。
（3）在插件的使用过程中，个人认为最佳实践是把校验提示使用单独的JS文件，如上面实例所示，如果觉得统一的提示不太定制化，可以再考虑在validate方法中添加对应的messages覆盖掉统一提示。另外，自定义的校验规则也考虑使用独立的JS文件，这样在页面较多的时候，公共的校验可以公用。
相关推荐
让jquery validation plugin 支持zepto
NULL 博文链接：https://gqsunrise.iteye.com/blog/2367006
JQuery validation plugin学习资料
jQuery Validation表单验证插件实例合集，是锋利的JQuery第七章中的一个典型实例，一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法，一共包含了7个...
jQuery Validation 参考手册
（三、四）选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 （五）验证器 (jQuery validation) 8 （六）内置验证方法 (jQuery validation) 10 （七）注意事项 (jQuery validation) 16 （八）应用...
jquery-validation-1.9.0是一款优秀的form表单验证插件，此资源主要为某篇博客服务，如有需要还请下载。整个压缩包无法上传，有需要请留言
jqueryvalidation 官方网站内容，本人编译的CHM文件，方便查询学习。
jQuery Validation Plug最新版。解决jQuery1.6不能工作的问题在IE 6,7,8,9
Jquery formvalidation的源码和示例，收费版本前的最后一个免费版本。
jquery-validation-1.8.0.zip jquery-validation-1.8.0.zip jquery-validation-1.8.0.zip
jQuery 验证插件 jquery-validation-1.11.1
jquery-validation-1.8.0.rar jquery-validation-1.8.0.rar
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具，其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jQuery 插件使客户端表单验证变得容易，同时仍然提供了大量的自定义选项。如果您要从头开始构建新的东西，或者当您试图将某些东西集成到具有大量现有标记的现有应用程序中时，它都是一个不错的选择。该插件捆绑了一...
jQuery Validation Plugin是一款基于jQuery的表单数据校验插件，使用非常简单方便，该插件版本为1.13.0。
jquery-validation-1.9.0，内有详细示例demo
轻量的jQuery Validation
jquery-validation验证的api，自己在网上找的资料整理而成。工作中需要！