jquery validate.js表单验证的基本用法入门


Posted in Javascript onMay 13, 2010

这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录。
先贴一个国内某大公司的代码:

<script type="text/javascript"> 
function lang(key) { 
mylang = { 
'ls_input_myb': '请输入您的账户', 
'ls_myb_email': '漫游币账户为邮箱地址', 
'ls_login_password': '请输入您的登录密码', 
'ls_password_length': '密码长度为{0}-{1}位之间', 
'ls_input_captcha': '请输入验证码', 
'ls_captcha_length': '验证码的长度为{0}位', 
'ls_account_email': '账户名为邮箱地址', 
'':'' 
}; 
return mylang[key]; 
} 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$("#loginForm").validate({ 
rules: { 
uEmail: { 
required: true, 
email: true 
}, 
uPassword: { 
required: true, 
rangelength: [6, 30] 
} 
}, 
messages: { 
uEmail: { 
required: lang('ls_input_myb'), 
email: lang('ls_myb_email') 
}, 
uPassword: { 
required: lang('ls_login_password'), 
rangelength: $.format(lang('ls_password_length')) 
} 
}, 
errorPlacement: function(error, element) { 
var placement = $(element.parent("td").parent("tr").next("tr").find("td").get(1)); 
placement.text(''); 
error.appendTo( placement ); 
}, 
onkeyup: false 
}); 
var accountTipsText = lang('ls_account_email'); 
$("#uEmail").focus(function() { 
if (!$($(this).parent().parent().next().find('td').get(1)).text()) { 
$($(this).parent().parent().next().find('td').get(1)).html('<span class="font_888_8">' + accountTipsText + '</span>'); 
} 
$(this).css('color', '#000'); 
}).focus(); 
}); 
</script>

我就是从这个例子中开始的,其实这个例子几乎包含了jquery.validate.js的精髓,如果你完整理解了这个代码基本上算是入门了。
想起以前做期货网页在线模拟的时候都自己写代码去判断,真实幼稚死了…………
下面是完整的文章介绍。
默认校验规则
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(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).", 
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}.") 
},

如需要修改,可在js代码中加入:
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} 的值") 
});

推荐做法,将此文件放入messages_cn.js中,在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>
使用方式
1.将校验规则写到控件中
<script src="../js/jquery.js" type="text/javascript"></script> 
<script src="../js/jquery.validate.js" type="text/javascript"></script> 
<script src="./js/jquery.metadata.js" type="text/javascript"></script> 
$().ready(function() { 
$("#signupForm").validate(); 
}); 
<form id="signupForm" method="get" action=""> 
<label for="firstname">Firstname</label> 
<input id="firstname" name="firstname" class="required" /> 
<label for="email">E-Mail</label> 
<input id="email" name="email" class="required email" /> 
<label for="password">Password</label> 
<input id="password" name="password" type="password" class="{required:true,minlength:5}" /> 
<label for="confirm_password">确认密码</label> 
<input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" /> 
<input class="submit" type="submit" value="Submit"/> 
</form>

使用class="{}"的方式,必须引入包:jquery.metadata.js
可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:true,minlength:5,equalTo:'#password'}"
另外一个方式,使用关键字:meta(为了元数据使用其他插件你要包装 你的验证规则在他们自己的项目中可以用这个特殊的选项)
Tell the validation plugin to look inside a validate-property in metadata for validation rules.
例如:
meta: "validate"
<input id="password" name="password" type="password" class="{validate:{required:true,minlength:5}}" />
再有一种方式:
$.metadata.setType("attr", "validate");
这样可以使用validate="{required:true}"的方式,或者class="required",但class="{required:true,minlength:5}"将不起作用
2.将校验规则写到代码中
$().ready(function() { 
$("#signupForm").validate({ 
rules: { 
firstname: "required", 
email: { 
required: true, 
email: true 
}, 
password: { 
required: true, 
minlength: 5 
}, 
confirm_password: { 
required: true, 
minlength: 5, 
equalTo: "#password" 
} 
}, 
messages: { 
firstname: "请输入姓名", 
email: { 
required: "请输入Email地址", 
email: "请输入正确的email地址" 
}, 
password: { 
required: "请输入密码", 
minlength: jQuery.format("密码不能小于{0}个字符") 
}, 
confirm_password: { 
required: "请输入确认密码", 
minlength: "确认密码不能小于5个字符", 
equalTo: "两次输入密码不一致不一致" 
} 
} 
}); 
}); 
//messages处,如果某个控件没有message,将调用默认的信息 
<form id="signupForm" method="get" action=""> 
<label for="firstname">Firstname</label> 
<input id="firstname" name="firstname" /> 
<label for="email">E-Mail</label> 
<input id="email" name="email" /> 
<label for="password">Password</label> 
<input id="password" name="password" type="password" /> 
<label for="confirm_password">确认密码</label> 
<input id="confirm_password" name="confirm_password" type="password" /> 
<input class="submit" type="submit" value="Submit"/> 
</form>

required:true 必须有值
required:"#aa:checked"表达式的值为真,则需要验证
required:function(){}返回为真,表时需要验证
后边两种常用于,表单中需要同时填或不填的元素
常用方法及注意问题
1.用其他方式替代默认的SUBMIT
$().ready(function() { 
$("#signupForm").validate({ 
submitHandler:function(form){ 
alert("submitted"); 
form.submit(); 
} 
}); 
});

可以设置validate的默认值,写法如下:
$.validator.setDefaults({
submitHandler: function(form) { alert("submitted!");form.submit(); }
});
如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
2.debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
$().ready(function() {
$("#signupForm").validate({
debug:true
});
});
如果一个页面中有多个表单,用
$.validator.setDefaults({
debug: true
})
3.ignore:忽略某些元素不验证
ignore: ".ignore"
4.errorPlacement:Callback Default: 把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) { 
error.appendTo(element.parent()); 
} 
//示例: 
<tr> 
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td> 
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td> 
<td class="status"></td> 
</tr> 
<tr> 
<td style="padding-right: 5px;"> 
<input id="dateformat_eu" name="dateformat" type="radio" value="0" /> 
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label> 
</td> 
<td style="padding-left: 5px;"> 
<input id="dateformat_am" name="dateformat" type="radio" value="1" /> 
<label id="ldateformat_am" for="dateformat_am">02/14/07</label> 
</td> 
<td></td> 
</tr> 
<tr> 
<td class="label"> </td> 
<td class="field" colspan="2"> 
<div id="termswrap"> 
<input id="terms" type="checkbox" name="terms" /> 
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label> 
</td> 
</tr> 
errorPlacement: function(error, element) { 
if ( element.is(":radio") ) 
error.appendTo( element.parent().next().next() ); 
else if ( element.is(":checkbox") ) 
error.appendTo ( element.next() ); 
else 
error.appendTo( element.parent().next() ); 
}

代码的作用是:一般情况下把错误信息显示在<td class="status"></td>中,如果是radio显示在<td></td>中,如果是checkbox显示在内容的后面
errorClass:String Default: "error"
指定错误提示的css类名,可以自定义错误提示的样式
errorElement:String Default: "label"
用什么标签标记错误,默认的是label你可以改成em
errorContainer:Selector
显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer:Selector
把错误信息统一放在一个容器里面。
wrapper:String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
设置错误提示的样式,可以增加图标显示
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"
nsubmit: Boolean Default: true
提交时验证. 设置唯false就用其他方法去验证
onfocusout:Boolean Default: true
失去焦点是验证(不包括checkboxes/radio buttons)
onkeyup:Boolean Default: true
在keyup时验证.
onclick:Boolean Default: true
在checkboxes 和 radio 点击时验证
focusInvalid:Boolean Default: true
提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
focusCleanup:Boolean Default: false
如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用
// 重置表单 
$().ready(function() { 
var validator = $("#signupForm").validate({ 
submitHandler:function(form){ 
alert("submitted"); 
form.submit(); 
} 
}); 
$("#reset").click(function() { 
validator.resetForm(); 
}); 
});

remote:URL
使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项
remote: "check-email.php" 
remote: { 
url: "check-email.php", //后台处理程序 
type: "post", //数据发送方式 
dataType: "json", //接受数据格式 
data: { //要传递的数据 
username: function() { 
return $("#username").val(); 
} 
} 
}

远程地址只能输出 "true" 或 "false",不能有其它输出
addMethod:name, method, message
自定义验证方法
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
radio和checkbox、select的验证
radio的required表示必须选中一个
<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox的required表示必须选中
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox的minlength表示必须选中的最小个数,maxlength表示最大的选中个数,rangelength:[2,3]表示选中个数区间
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, 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!" class="{required:true}"> 
<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>

文章排版有点乱,仅仅是自己的记录~~
Javascript 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
项目中常用的JS方法整理
Jan 30 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
JQuery 选择器 xpath 语法应用
May 13 #Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 #Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 #Javascript
JavaScript 判断指定字符串是否为有效数字
May 11 #Javascript
Jquery 获得服务器控件值的方法小结
May 11 #Javascript
超简单的jquery的AJAX用法
May 10 #Javascript
基于jquery用于查询操作的实现代码
May 10 #Javascript
You might like
php+jquery编码方面的一些心得(utf-8 gb2312)
2010/10/12 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php 使用array函数实现分页
2015/02/13 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
jQuery实现简单轮播图效果
2020/12/27 jQuery
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python 中文乱码问题深入分析
2011/03/13 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python实现自动解数独小程序
2019/01/21 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
2015/04/24 HTML / CSS
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
Laravel中Kafka的使用详解
2021/03/24 PHP
回门宴答谢词
2014/01/13 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
同学会感言
2015/07/30 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
Java 多线程并发FutureTask
2022/06/28 Java/Android