jQuery_validate表单验证
2018-03-12 16:15
267 查看
jQuery_validate是jQuery的一个插件。它通过一系列简单而又不失严谨的验证规则，使开发者更便捷的实现表单验证，来提高用户体验效果。
使用validate验证必须引入js包。既然是jQuery的插件，就必须在jQuery环境下。
jQuery Validate提供了中文提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：
你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：
使用：必须使用表单的name属性值来判断校验规则
重点看自定义验证规则：
ignore：忽略某些元素不验证
更改错误信息显示的位置
更改错误信息显示的样式
每个字段验证通过执行函数
radio 和 checkbox、select 的验证
使用validate验证必须引入js包。既然是jQuery的插件，就必须在jQuery环境下。
默认校验规则
(1)required:true 必输字段 (2)remote:"validate.jsp" 使用ajax方法调用validate.jsp验证输入值 (3)email:true 必须输入正确格式的电子邮件 (4)url:true 必须输入正确格式的网址 (5)date:true 必须输入正确格式的日期 日期校验ie6出错，慎用 (6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格 式，不验证有效性 (7)number:true 必须输入合法的数字(负数，小数) (8)digits:true 必须输入整数 (9)creditcard: 必须输入合法的信用卡号 (10)equalTo:"#field" 输入值必须和#field相同 (11)accept: 输入拥有合法后名的字符串（上传文件的后） (12)maxlength:5 输入长度多是5的字符串(汉字算一个字符) (13)minlength:10 输入长度小是10的字符串(汉字算一个字符) (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (15)range:[5,10] 输入值必须介于 5 和 10 之间 (16)max:5 输入值不能大于5 (17)min:10 输入值不能小于10
默认的提示规则
messages: {
required: "This field is required.",
remote: "Please fix this field.",
email: "Please enter a valid email address.",
url: "Please enter a valid URL.",
date: "Please enter a valid date.",
dateISO: "Please enter a valid date ( ISO ).",
number: "Please enter a valid number.",
digits: "Please enter only digits.",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
maxlength: $.validator.format( "Please enter no more than {0} characters." ),
minlength: $.validator.format( "Please enter at least {0} characters." ),
rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
range: $.validator.format( "Please enter a value between {0} and {1}." ),
max: $.validator.format( "Please enter a value less than or equal to {0}." ),
min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}jQuery Validate提供了中文提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：
你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
使用：必须使用表单的name属性值来判断校验规则
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQueryValidate验证</title>
</head>
<body>
<form id="myForm" action="sucessful.html">
用户名：<input name="userName" type="text" placeholder="请输入用户名" title="请输入用户名"/><br/>
密码：<input id="myPwd" name="password" type="password"/><br/>
确认密码：<input name="repPwd" type="repwd"/><br/>
邮箱：<input name="email" type="email"/><br/>
手机号：<input name="phone" type="phone"/><br/>
是否同意协议：<input name="context" type="checkbox"/><br/>
<button type="submit">登录</button>
</form>
<script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="JS/jquery.validate.js"></script>
<script>
$(function(){
/*jQuery_validate表单验证*/
$("#myForm").validate({
rules:{
userName:{
required:true
},
password:{
required:true,
minlength:6,
maxlangth:10
},
repPwd:{
required:true,
minlength:6,
maxlength:10,
equalTo:"#myPwd"
},
email:{
required:true,
email:true
},
phone:{
required:true,
checkPhone:true
},
context:{
required:true
}
},
messages:{
userName:{
required:"请输入用户名"
},
password:{
required:"请输入密码",
minlength:"密码长度不少于6位",
maxlength:"密码长度不大于10位"
},
repPwd:{
required:"请输入重复密码",
minlength:"密码长度不要少于6位",
maxlength:"密码长度不大于10位",
equalTo:"两次密码必须一致"
},
email:{
required:"请输入邮箱",
email:"邮箱格式不正确",
},
phone:{
required:"请输入手机号"
},
context:{
required:"必须同意协议"
}
},//jQuery_validate验证结束
//文本框失去焦点就立即验证
onfocusout:function(e){
$(e).valid();
}
});
//增加手机验证规则：
$.validator.addMethod("checkPhone",function(value,e){
var phone=/^1[3|4|5|8][0-9]\d{4,8}$/;
return this.optional(e)||(phone.test(value))
},"手机号格式不正确")
});
</script>
</body>
</html>重点看自定义验证规则：
addMethod(name,method,message)方法
参数 name 是添加的方法的名字。
参数 method 是一个函数，接收三个参数 (value,element,param) 。
value 是元素的值，element 是元素本身，param 是参数。
我们可以用 addMethod 来添加除内置的 Validation 方法之外的验证方法。比如有一个字段，只能输一个字母，范围是 a-f，写法如下：
$.validator.addMethod("af",function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0] && value<=params[1]){
return true;
}else{
return false;
}
},"必须是一个字母,且a-f");
如果有个表单字段的 name="username"，则在 rules 中写：
username:{
af:["a","f"]
}
addMethod 的第一个参数，是添加的验证方法的名字，这时是 af。
addMethod 的第三个参数，是自定义的错误提示，这里的提示为:"必须是一个字母,且a-f"。
addMethod 的第二个参数，是一个函数，这个比较重要，决定了用这个验证方法时的写法。
如果只有一个参数，直接写，比如 af:"a"，那么 a 就是这个唯一的参数，如果多个参数，则写在 [] 里，用逗号分开。validate还提供了许多灵活的校验方式和规则。
debug模式：只验证不提交，在调试阶段能很方便的运用。`如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果一个页面中有多个表单都想设置成为 debug，则使用：
$.validator.setDefaults({
debug: true
})`ignore：忽略某些元素不验证
ignore: ".ignore"
更改错误信息显示的位置
errorPlacement：Callback
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}更改错误信息显示的样式
设置错误提示的样式，可以增加图标显示，在该系统中已经建立了一个 validation.css，专门用于维护校验文件的样式。
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}每个字段验证通过执行函数
success：String,Callback
要验证的元素通过验证后的动作，如果跟一个字符串，会当作一个 css 类，也可跟一个函数。
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
添加 "valid" 到验证元素，在 CSS 中定义的样式 <style>label.valid {}</style>。
success: "valid"radio 和 checkbox、select 的验证
radio 的 required 表示必须选中一个。
<input type="radio" id="gender_male" value="m" name="gender" required />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。
<input type="checkbox" class="checkbox" id="agree" name="agree" required />
checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" required>
<option value=""></option>
<option value="1">Buga</option>
<option value="2">Baga</option>
<option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
<option value="b">Banana</option>
<option value="a">Apple</option>
<option value="p">Peach</option>
<option value="t">Turtle</option>
</select>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery validate表单验证插件使用方法
- jquery validate插件高级表单验证
- jquery.validate.js使用之自定义表单验证规则
- jquery.validate验证表单配合回调提交和h5.storage本地保存笔记
- jquery validate表单验证插件
- jquery---ajax异步提交+validate表单验证
- jquery validate 表单验证
- jQuery Validate插件实现表单强大的验证功能
- jQuery Validate表单验证入门学习
- jquery validate表单验证的基本用法入门
- 深入学习jQuery Validate表单验证
- jQuery表单验证插件 jQuery validate
- jquery validate.js表单验证的基本用法入门
- 表单验证 jQuery Validate
- Form表单利用jQuery Validate验证ajaxSubmit提交
- Jquery Validate 表单验证的多种方式
- jQuery validate 表单验证，涵盖各种类型数据
- 使用jquery validate表单验证插件
- jquery.validate.js表单验证
- 使用JQuery，但不使用JQuery validate 来验证表单非空情况