JQuery笔记(表单验证大全)
jquery.validate.js 是 jquery 旗下的一个验证插件,借助 jquery 的优势,我们可以迅速验证一些常见的输入 , 并且可以自己扩充自己的验证方法。
举个例子,有这么一个表单:
view plaincopy to clipboardprint?
在这个表单中,有名、姓、用户名、密码、确认密码和 email 。他们都为非空,并且电子邮件需要是格式正确的地址、确认密码和密码一致。使用 jQuery 验证最简单的方式是引入 jquery.js 和 jquery validation.js 两个 js 文件。然后分别在 input 中加入 class 即:
view plaincopy to clipboardprint?
以下列出 validate 自带的默认验证
required: \必选字段 \
remote: \请修正该字段 \
email: \请输入正确格式的电子邮件 \
url: \请输入合法的网址 \
date: \请输入合法的日期 \
dateISO: \请输入合法的日期 (ISO).\
number: \请输入合法的数字 \
digits: \只能输入整数 \
creditcard: \请输入合法的信用卡号 \
equalTo: \请再次输入相同的值 \
accept: \请输入拥有合法后缀名的字符串 \
maxlength: jQuery.format(\请输入一个长度最多是 {0} 的字符串 \
minlength: jQuery.format(\请输入一个长度最少是 {0} 的字符串 \
rangelength: jQuery.format(\请输入一个长度介于 {0} 和 {1} 之间的字符串 \
range: jQuery.format(\请输入一个介于 {0} 和 {1} 之间的值 \
max: jQuery.format(\请输入一个最大为 {0} 的值 \
min: jQuery.format(\请输入一个最小为 {0} 的值 \
然后,在 document 的 read 事件中,加入如下方法:
这样,当 form 被提交的时候,就会根据 input 指定的 class 来进行验证了。如果失败, form 的提交就会被阻止。并且,将提示信息显示在 input 的后面。
不过,这样感觉不好,因为验证规则侵入了我们的 html 代码。还有一个方式,便是使用“ rules” 。我们将 input 的那些验证用 class 删除掉。然后修改 document 的 ready 事件响应代码:
$(document).ready(function(){
$(\
rules:{
firstname:\
lastname:\
username:\
password:\
confirm_password:{
required:true,
equalTo:\ },
email:{
required:true,
email:true } }