jQuery验证控件jquery.validate.js全中文使用教程及常见规则详解

需积分: 10 4 下载量 188 浏览量 更新于2024-07-27 收藏 204KB DOC 举报
jQuery验证控件jquery.validate.js是一个强大的JavaScript插件,用于增强用户在网页表单提交前对输入数据的有效性进行验证。它为前端开发人员提供了一种方便的方式来实现客户端表单验证,提升用户体验并减少服务器端不必要的请求。 首先,要使用这个插件,你需要在HTML文档的<head>部分引入jQuery库和jQuery Validation插件的脚本文件。示例代码如下: ```html <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> ``` 默认校验规则包括多种常见的验证条件,如: 1. **required:** 必须填写字段,如果为空则提示"此字段不能为空"。 2. **remote:** 利用Ajax调用`check.php`进行远程验证,验证输入值是否符合预期。 3. **email:** 验证输入内容是否为有效的电子邮件格式。 4. **url:** 检查输入是否为合法的网址格式。 5. **date:** 验证日期格式,但需注意IE6存在兼容问题,可能需要特别处理。 6. **dateISO:** 类似date,但仅验证ISO格式,不检查有效性。 7. **number:** 确保输入的是合法的数字,支持负数和小数。 8. **digits:** 输入必须为整数。 9. **creditcard:** 验证信用卡号是否符合标准格式。 10. **equalTo:** 输入值必须与指定的`#field`内的值相等。 11. **accept:** 检查输入是否具有特定的文件后缀,适用于文件上传验证。 12. **maxlength:** 指定最大字符长度,如限制5个字符。 13. **minlength:** 设置最小字符长度,如要求10个字符。 14. **rangelength:** 确保输入长度在指定范围内,如5到10个字符。 15. **range:** 对数值进行范围限制,如5到10。 16. **max:** 设置最大值,如不超过5。 17. **min:** 设置最小值,如不少于10。 插件还提供了自定义错误消息的功能,通过`messages`对象来定义不同验证失败时的提示信息,例如: ```javascript messages: { required: "此字段不能为空。", remote: "请修复此字段。", email: "请输入有效的电子邮件地址。", // 更多自定义消息... } ``` 这些默认规则和提示可以根据项目需求进行修改或扩展。在实际使用中,你可以根据表单结构和业务逻辑,动态配置验证规则,并结合jQuery的选择器灵活地应用在特定的输入字段上。 jQuery Validate.js提供了一个强大且易于使用的工具来增强Web表单的验证功能,减少了前端和后端交互的压力,提升了用户体验。掌握并熟练运用这些功能,将有助于构建高效、可靠的前端验证系统。
2011-04-29 上传
本人自己开发的jquery表单验证控件! 使用方便,样式美观,完全开源。好不好用了就知道了! 插件名称:jquery表单验证插件 V1.0 插件作者:zy8008 最后更新:2011-4-28 插件说明: datatype类型说明: --------------------------------------- *:必填写,可为任意字符 number:数字 zip:邮政编码 mobile:手机号 email:邮箱 ajax:异步远程验证,必须添加ajaxurl属性并将要验证的字段保留空 如: reg:正则验证,必须添加reg属性 如: checkbox:复选框验证 radiobox:单选框验证 前台添加属性说明: ----------------------------------------------- datatype:必须 数据验证类型,见上面说明 errmsg:可选 错误信息,验证失败的信息,如果不设置或为空,则验证框显示“验证失败!” tip:可选 未验证前的提示信息,如果不设置或为空,则隐藏提示框 allowblank:可选 值为“true|false”默认为true 是否允许为空,如果设为true则值为空的时候也能通过验证,对*,ajax,checkbox,radiobox,reg无效 reg: 正则表达式规则,只能用开datatype为reg的时候,否则无效 ajaxurl:异步远程验证url,只能用的datatype为ajax的时候,否则无效。将要验证的字段放在url最后,将留空 如test.asp?uname= 调用说明: ------------------------------------------------- $(document).ready(function() { $("#aspnetForm").valideform({isokhide:true,btnsubmit:"#bbb"})}); #aspnetForm:需要验证的表单的ID,你也可以用jquery选择器自已定义 isokhid:可选 值为“true|false”默认为false 当点击提交按钮的时候,如果通过验证的项目将隐藏验证提示框 btnsubmit:可选 指定一个绑定提交事件的控件ID,如一个普通按钮或一个超链接,表单中的submit依然有效 其它具体使用方法,请参阅demo文件!