jquery表单验证大全

2019-02-16 14:30

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 } }


jquery表单验证大全.doc 将本文的Word文档下载到电脑 下载失败或者文档不完整,请联系客服人员解决!

下一篇:2013年高考真题 - 理科数学(湖北卷) 解析版 - 图文

相关阅读
本类排行
× 注册会员免费下载(下载后可以自由复制和排版)

马上注册会员

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信: QQ: