您现在的位置:首页 --> JavaScript --> 表单校验
表单校验
浏览:2422次 出处信息
最近有个项目,用到很多的表单校验,尝试了一下jQuery.validator,甚是顺手,地址:http://plugins.jquery.com/project/validate,基本的用法:
$('#formId').validate({ debug:true, // 打开debug模式,不会真实提交,适合测试 rules:{ uName:"required", // 需要录入 uNick:{ required:true }, // 需要录入的另一种写法 uBlog:{ required:true, url:true } // 需要输入,且录入的必须是url }, messages:{ // 自定义提示语文字 uName:"请输入用户名" }, submitHandler:function(form) { // 表单提交,需要jqueyr.form插件 form.submit(); } }
阅读一下文档差不多就会了解,支持的校验格式有:
required:必填字段
email:电子邮件
url:合法的网址
date:日期
dateISO:日期(ISO)
number:数字
digits:整数
creditcard:信用卡号
equalTo:相同的值
accept:拥有合法后缀名的字符串
maxlength:最多长度的字符串
minlength:最少长度的字符串
rangelength:一个长度介于最小值和最大值之间的字符串
range:一个介于最小值和最大值之间的值
max:最大值
min:最小值
相对高阶一点功能:
- 自定义错误提示信息
当然,你可以通过定义messages来修改提示信息,但你想偷懒又不想用默认的英文提示,直接引入默认提示文字
<script src="path/to/localization/messages_cn.js" type="text/javascript"></script>
- IE6下不工作的bug
传闻IE6下,jquery.validate.js有乱码,不能正常工作,解决办法:
<script src="path/to/jquery.validate.js" type="text/javascript" charset="iso-8859-1"></script>
- 控制错误信息显示位置
有的时候默认的错误信息显示有问题,比如多个单选框,默认的会把错误信息显示在第一个单选框后面,页面就乱了,解决办法:
errorPlacement: function(error, element) { if (element.is(":radio")) { error.appendTo(element.parent().parent("td")); else { error.appendTo(element.parent()); } }
当然,还可以重载invalidHandler来实现
- 依赖校验
有的时候,一个输入框的校验依赖于其他条件,比如登录的时候可以通过用户名或者邮箱登录,只有当用户选择用邮箱登录时,才对邮箱输入框验证,rules中可以这样写:
uMail:{ required:{depends: function(element) { return true == $('#isMail').val(); }}, email:true }
这样只有用户选择了用邮箱登录才会校验 邮箱项,否则不校验。
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46516)
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9682)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7750)
- Web表单设计之注册表单 (阅读:7684)
- jQuery的data()方法 (阅读:7573)
- jQuery性能优化指南 (阅读:7302)
- jQuery Color Animations颜色动画插件 (阅读:7069)
- 精于图片处理的10款jQuery插件 (阅读:6203)
- jQuery中getJSON跨域原理详解 (阅读:5612)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:js制作提示公告带关闭可保存cookie
后一篇:javascript 最简单的UI实现(学习) >>
文章信息
- 作者:超群.com 来源: 超群.com的博客
- 标签: jQuery 表单
- 发布时间:2009-11-08 23:14:56
建议继续学习
近3天十大热文
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则