jquery.validate
浏览数：31 /
时间：2015年06月09日
jquery.validate 学习笔记（验证form表单工具）
在网上找了一些资料，很多对表单验证的工具需要指明表单的控件的name 或者 id，就需要自己写JS代码来指明哪些控件需要添加校验，如果页面很多，自己JS的工作量还是比较大的，还不如自己写代码去校验，因此我选择了jquery.validate.js这个工具，它只需要在控件中添加对应的属性就可以了，不需要再写JS代码去指明哪些控件需要校验表单内容。
修改默认提示信息的方法
/* 默认提示信息
var 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).",
dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
number: "Please enter a valid number.",
numberDE: "Bitte geben Sie eine Nummer ein.",
digits: "Please enter only digits",
creditcard: "Please enter a valid credit card number.",
equalTo: "Please enter the same value again.",
accept: "Please enter a value with a valid extension.",
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.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} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});
自己写的demo,仅仅是在控件端添加属性验证表单内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/util/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/util/jquery.validate.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<br>
<form action="" id="myform">
<fieldset>
必须填写：<br>
<input type="text" name="a" required><br>
<br>
minlength="2" maxlength="5" 必须填写，最小长度是2，最大长度是5:(汉字算一个字符)<br>
<input id="cname" name="name" minlength="2" minlength="2" maxlength="5" type="text" /><br>
<br>
rangelength="5,10" 输入的内容长度必须在5-10之间：(汉字算一个字符)<br>
<input id="range" name="range" rangelength="5,10" /><br>
<br>
min="11" max="22" 必须填写，数字最小值为11，最大值为22：<br>
<input id="num" name="num" min="11" max="22" type="text" /><br>
<br>
range="11,22" 必须填写，数字最小值为11，最大值为22：<br>
<input id="num1" name="num1" range="11,22" type="text" /><br>
<br>
equalTo="#mypassword" 两个密码一致校验：<br>
mypassword:<input id="mypassword" name="mypassword" type="password" /><br>
repassword:<input id="repassword" name="repassword" type="password" equalTo="#mypassword" /><br>
<br>
number="true" 必须输入合法的数字：必须输入合法的数字(负数，小数) <br>
<input id="number" name="number" number="true" /><br>
<br>
digits="true" 必须输入整数：<br>
<input type="text" digits="true" name="integer" id="integer" ><br>
<br>
email="true" EMAIL：<br>
<input type="text" email="true" name="email" id="email" ><br>
<br>
url="true" URL：（要有http(s)://www）<br>
<input type="text" url="true" name="url" id="url" ><br>
<br>
date="true" DATE日期：(2003/9/9),值校验格式，不会校验里面的数据，因此详细内容还是要自己校验<br>
<input type="text" date="true" name="date" id="date" ><br>
<br>
dateISO="true" dateISO日期：值校验格式，不会校验里面的数据，因此详细内容还是要自己校验<br>
<input type="text" dateISO="true" name="dateISO" id="dateISO" ><br>
<br>
<font color="red">对上传文件格式进行校验：(这个问题还等待解决)</font><br>
<input type="file" accept="png|txt" name="accept" id="accept" required><br>
<input type="text" accept=".ppp" name="accept1" id="accept1" required><br>
<br>
<font color="red">备注：表单的id 和 name必须唯一，否则无法正确校验。</font>
<input class="submit" type="submit" value="Submit"/>
</fieldset>
</form>
</body>
</html>
<script>
$(function(){
//指明校验哪个表单，因为一个页面可以有多个表单
$("#myform").validate();
//alert(1);
});
</script>
上面的例子的确能够快速的校验表单，但是提示信息不够精细，不能够准确的提示用户，因此还有如下方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/util/jquery-1.4.4.js">
</script>
<script type="text/javascript" src="js/util/jquery.validate.min.js">
</script>
<title>
Insert title here
</title>
</head>
<body>
<br>
<!-- 表单校验功能 -->
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>
字段校验、日历控件完整示例
</legend>
<table>
<tr>
<td>
<label for="username">
Username
</label>
</td>
<td>
<input id="username" name="username" />
</td>
<!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改 -->
<td>
</td>
</tr>
<tr>
<td>
<label for="password">
Password
</label>
</td>
<td>
<input id="password" name="password" type="password" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="confirm_password">
Confirm password
</label>
</td>
<td>
<input id="confirm_password" name="confirm_password" type="password" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="sex">
sex
</label>
</td>
<td>
男<input id="sex1" name="sex" type="radio" />
女 <input id="sex2" name="sex" type="radio" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="email">
Email
</label>
</td>
<td>
<input id="email" name="email" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="upload">
Upload
</label>
</td>
<td>
<input type="file" name="upload" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="language">
language
</label>
</td>
<td>
<input type="checkbox" name="language" value="cn" />
汉语
<input type="checkbox" name="language" value="en" />
英语
<input type="checkbox" name="language" value="jp" />
日语
<input type="checkbox" name="language" value="ge" />
德语
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="book">
book
</label>
</td>
<td>
<select name="book" multiple="multiple">
<option value="en">
英语书
</option>
<option value="cn">
汉语书
</option>
<option value="jp">
日语书
</option>
<option value="ge">
德语书
</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
<label for="agree">
同意该协议
</label>
</td>
<td>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</td>
<td>
</td>
</tr>
<tr>
<td>
<input class="submit" type="submit" value="Submit" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<script>
$(document).ready(function() {
//通过id查找要进行校验的表单
$("#signupForm").validate({
//设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
//onsubmit:false,
//onfocusout:false,
//onkeyup:false,
//onclick:false,
//验证通过后执行的动作
//success:function(label){
// label.text("ok!").addClass("success");
//},
//手动设置错误信息的显示方式
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
// if ( element.is(":radio") )
// error.appendTo( element.siblings("span") );
// else if ( element.is(":checkbox") ){
// error.appendTo ( element.siblings("span") );
// }
// else
// error.appendTo( element.parent() );
},
rules: {
username: {
required: true,
rangelength: [5, 7]
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
sex: {
required: true
},
email: {
required: true,
email: true
},
language: {
required: true,
rangelength: [2, 3]
},
book: {
required: true,
rangelength: [2, 3]
},
agree: "required",
upload: {
required: true,
accept: "flv|jpg"
}
},
//校验提示信息
messages: {
username: {
required: "请输入用户名",
rangelength: "用户名长度必须为{0}到{1}个字符或汉字"
},
password: {
required: "请输入密码",
minlength: "密码的最小长度是{0}个字符"
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码的最小长度是{0}个字符",
equalTo: "确认密码与密码不相等"
},
email: "请输入正确的邮箱",
language: {
required: "该项必须填写",
rangelength: "请您选择{0}到{1}项语言"
},
book: {
required: "该项必须选择",
rangelength: "请您选择{0}到{1}本书"
},
agree: "您没有同意使用协议",
upload: {
required: "请输入上传文件的路径",
accept: "上传文件的格式只能是 flv或jpg"
}
}
});
});
</script>
备注：
1、rules对象里面的key是表单的“name”和“id”,这里我们要求name与id对应起来。
2、message与rules对应起来，都是对应表单的名称
3、rules中的required表示是验证内容不能为空，message中的required表示给出内容为空的提示
来自http://www.ylzx8.cn/web/web/992633.html
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
