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

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

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

使用教程

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

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

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

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

说明：验证不通过的表单元素会自动加上背景色和边框，同时也会增加 validateError 类，如果你需要自定义CSS，可以通过此类来声明。

内置验证规则：

使用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/