Jquery Validation实用示例及讲解
浏览数：38 /
时间：2015年06月09日
不论是出于用户体验的考虑，还是出于安全角度的考虑，在网站开发过程中，涉及到表单提交时都会需要进行表单校验，而表单校验往往涉及到很多字段及规则。使用原生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请求方法，在后台直接返回boolean值就可以了。后面有空的话再做一个前后台校验的示例。
（3）在插件的使用过程中，个人认为最佳实践是把校验提示使用单独的JS文件，如上面实例所示，如果觉得统一的提示不太定制化，可以再考虑在validate方法中添加对应的messages覆盖掉统一提示。另外，自定义的校验规则也考虑使用独立的JS文件，这样在页面较多的时候，公共的校验可以公用。?
?
?
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
