jquery表单验证$.formFilter的使用教程和内置验证规则

阅读390 评论0
formFilter.min.js表单数据验证JQ版插件,这个插件已近整合到webstr.min.js中。在最后会放独立的插件包(制作中)。市面的表单验证插件不少,用好用的也有难用的,这个插件是结合经验写的,争取让开发者更方便、快捷的使用。使用教程使用教程很简单,只需在需要验证的表单元素上加入“validate”类名即可。通过自定义属性data-filter...

formFilter.min.js表单数据验证JQ版插件,这个插件已近整合到webstr.min.js中。在最后会放独立的插件包(制作中)。

市面的表单验证插件不少,用好用的也有难用的,这个插件是结合经验写的,争取让开发者更方便、快捷的使用。

使用教程

使用教程很简单,只需在需要验证的表单元素上加入“validate”类名即可。通过自定义属性data-filter来设置验证规则,data-title设置自定义提示元素标题。

data-filter:自定义的验证规则,多个规则使用“|”分割。

data-title:自定义的错误提示标题,为空则提示“该内容”。

注意:除 required 外,其他规则都是当内容时才触发的。

内置验证规则:

名称
描述
用法
required必填项,不可为空

phone验证是否为手机号

email验证是否为邮箱

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 位网友评论:

欢迎 来评论

请填写验证码