jquery表单验证$.formFilter的使用教程和内置验证规则
formFilter.min.js表单数据验证JQ版插件,这个插件已近整合到webstr.min.js中。在最后会放独立的插件包(制作中)。
市面的表单验证插件不少,用好用的也有难用的,这个插件是结合经验写的,争取让开发者更方便、快捷的使用。
使用教程
使用教程很简单,只需在需要验证的表单元素上加入“validate”类名即可。通过自定义属性data-filter来设置验证规则,data-title设置自定义提示元素标题。
data-filter:自定义的验证规则,多个规则使用“|”分割。
data-title:自定义的错误提示标题,为空则提示“该内容”。
注意:除 required 外,其他规则都是当内容时才触发的。
说明:验证不通过的表单元素会自动加上背景色和边框,同时也会增加 validateError 类,如果你需要自定义CSS,可以通过此类来声明。
内置验证规则:
名称 | 描述 | 用法 |
required | 必填项,不可为空 | |
phone | 验证是否为手机号 | |
验证是否为邮箱 | ||
url | 验证是否为网址 | |
telephone | 验证是否为固定电话 | |
date | 验证是否为日期,格式支持:YYYY-MM-DD 分隔符支持:- 或 / 月、日支持单数 | |
datetime | 验证是否为时间,日期继承date的格式,时间格式支持:(T)HH:II:SS或(T)HH:II 支持单数 | |
idcard | 验证是否为身份证号,此为长度验证,严格验证请在后端完成 | |
number | 只能为数字 | |
en | 只能为英文字母,不分区大小写 | |
cn | 只能为中文,标点符号除外 | |
length | 指定字符的长度区间 | length:1-10,表示输入内容在1到10个字符之间 |
max | 最大字符长度 | max:10,表示最多可以输入10个字符 |
min | 最小字符长度 | min:2,表示最少输入2个字符 |
between | 指定输入的数字区间,必须为整数数字 | between:1-100,表示输入的数字只能在1到100之间 |
使用DEOM:
<form action="" method="post" class="postForm"> <div> <label>必填项</label> <input type="text" placeholder="" name="name" class="validate" data-filter="required" data-title="错误提示标题"/> </div> <div> <label>手机</label> <input type="text" placeholder="" name="name" class="validate" data-filter="phone" data-title=""/> </div> <div> <label>邮箱</label> <input type="text" placeholder="" name="name" class="validate" data-filter="email" data-title="邮箱"/> </div> <div> <label>必填&数字</label> <input type="text" placeholder="" name="name" class="validate" data-filter="required|number" data-title="年龄"/> </div> <div> <label>必填&指定长度</label> <input type="text" placeholder="" name="name" class="validate" data-filter="required|length:2-12" data-title=""/> </div> <button type="button" class="btn">提交</button> </form> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/webstr.min.js"></script> <script> $(document).ready(function(){ $('.btn').click(function(){ var res=$.formFilter(".postForm",{all:true,msg:true}); /* 当msg为true时,不论all的状态如何,只返回code,可通过code状态判断表单验证结果,为true则通过,为false则不通过。 当msg为false时: 1、all为true时,返回的是二维数组,可通过数组长度判断验证结果,长度不为0表示验证不通过。 2、all为false时,返回的是一维数组,可通过code状态判断表单验证结果,为true则通过,为false则不通过。 */ console.log(res) }) }) </script>
前往查看webstr插件:http://www.webstr.top/tools/mydocs/
有 0 位网友评论: