相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用。
可以先把我写的这个小demo运行试下,先睹为快。猛戳链接--》,http://pan.baidu.com/s/1o8zVdoQ
1.Demo讲解(validate参数见第3点)
1.1 Validate 要依赖jQuery的,所以HTML中js的引用关系如下:
<script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
<script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>
第一个就不用说了,第二个是验证插件(必须引用),第三个是自定义验证规则,第四个我们自己的js
1.2 注册form的结构:
<form class="am-form am-form-horizontal yf-form-tips add-form">
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="password1" name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="" name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormPhone" class="am-u-sm-2 am-form-label">手机号: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormPhone" placeholder="请输入您的手机号" class="" maxlength="11">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">联系地址: </label>
<div class="am-u-sm-10 yf-pl10">
<textarea id="" placeholder="请输入您的联系地址" name="addFormAdd" class="" maxlength="100"></textarea>
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<div class="am-u-sm-offset-2 yf-pl10">
<button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
</div>
</div> </form>
1.3 主要的js(blog-validate.js):
//表单验证规则
var formValid = $(".add-form").validate({
rules: {
"addFormName":{
"required":true, //必填字段
},
"addFormPass1":{
"required":true
},
"addFormPass2":{
"required":true,
"equalTo": "#password1" //输入值必须和 #password1 相同
},
"addFormPhone":{
"required":true,
"digits":true, //必须输入整数
"minlength":11 //输入长度最小是 11
},
"addFormAdd":{
"required":true
}
},
messages: {
"addFormName":{
"required":"用户名不能为空哦"
},
"addFormPass1":{
"required":"密码不能为空哦"
},
"addFormPass2":{
"required":"确认密码不能为空哦",
"equalTo":"两次输入的密码不一致哦"
},
"addFormPhone":{
"required":"手机号不能为空哦",
"digits":"手机号格式不正确哦",
"minlength":"手机号格式不正确哦",
},
"addFormAdd":{
"required":"地址不能为空哦"
}
},
errorPlacement:function(error,element) {
error.appendTo(element.siblings(".yf-error-tip"));
}
}); //提交前开始验证
var submitInfo = function(){
if($('.add-form').valid()){
alert('恭喜你,验证通过了!');
};
}
说明:
主要通过 $('.add-form').valid() 触发验证;
提示信息可在 errorPlacement 中配置放置的位置,提示默认的样式是"error",如需修改,参考validate ()可选项中的"errorClass"
2.有几个特别要注意的地方:
- validate ()的对象$(".add-form")对应的DOM标签必须是form标签
- 执行$(".add-form").validate 时,form在HTML结构中是存在的,类似jquery的remove之后或者angularJs的ngIf,都会导致验证失败
- validate ()的属性"rules"必须对应验证表单中标签的name属性
- 验证规则可以直接写在HTML中(不推荐,提示信息也不好处理),比如:
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20" required minlength='2'>
3.Validate官方标准
3.1 Validate的默认校验规则
名称 | 返回类型 | 描述 |
---|---|---|
required() | Boolean | 必填验证元素。 |
required(dependency-expression) | Boolean | 必填元素依赖于表达式的结果。 |
required(dependency-callback) | Boolean | 必填元素依赖于回调函数的结果。 |
remote(url) | Boolean | 请求远程校验。url 通常是一个远程调用方法。 |
minlength(length) | Boolean | 设置最小长度。 |
maxlength(length) | Boolean | 设置最大长度。 |
rangelength(range) | Boolean | 设置一个长度范围 [min,max]。 |
min(value) | Boolean | 设置最小值。 |
max(value) | Boolean | 设置最大值。 |
email() | Boolean | 验证电子邮箱格式。 |
range(range) | Boolean | 设置值的范围。 |
url() | Boolean | 验证 URL 格式。 |
date() | Boolean | 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。 |
dateISO() | Boolean | 验证 ISO 类型的日期格式。 |
dateDE() | Boolean | 验证德式的日期格式(29.04.1994 或 1.1.2006)。 |
number() | Boolean | 验证十进制数字(包括小数的)。 |
digits() | Boolean | 验证整数。 |
creditcard() | Boolean | 验证信用卡号。 |
accept(extension) | Boolean | 验证相同后缀名的字符串。 |
equalTo(other) | Boolean | 验证两个输入框的内容是否相同。 |
phoneUS() | Boolean | 验证美式的电话号码 |
3.2 validate ()的可选项
描述 |
代码 |
debug:进行调试模式(表单不提交)。 |
$(".selector").validate({ debug:true}) |
把调试设置为默认。 |
$.validator.setDefaults({ debug:true}) |
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); }}) |
ignore:对某些元素不进行验证。 |
$("#myform").validate({ ignore:".ignore"}) |
rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }}) |
messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确" } }}) |
groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。 |
$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true}) |
OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。 |
$(".selector").validate({ onsubmit:false}) |
onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。 |
$(".selector").validate({ onfocusout:false}) |
onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。 |
$(".selector").validate({ onkeyup:false}) |
onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。 |
$(".selector").validate({ onclick:false}) |
focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 |
$(".selector").validate({ focusInvalid:false}) |
focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。 |
$(".selector").validate({ focusCleanup:true}) |
errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。 |
$(".selector").validate({ errorClass:"invalid"}) |
errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。 |
$(".selector").validate errorElement:"em"}) |
wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。 |
$(".selector").validate({ wrapper:"li"}) |
errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") }}) |
showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); }}) |
errorPlacement:跟一个函数,可以自定义错误放到哪里。 |
$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true}) |
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") }}) |
highlight:可以给未通过验证的元素加效果、闪烁等。 |
更多的用法讲解,大家可以参考validate官网,或者菜鸟教程。