造了个轮子-[Validator,基于jquery的验证器]
发布于 5个月前 作者 klamtlne 812 次浏览 来自 分享

Validator

Validator是一个基于jQuery的验证器,验证成功后在回调函数中返回验证的健值对儿,极大的方便了表单验证+提交



Usage

    <form id="form">
        <input type="text" data-validator="name" data-rules="notEmpty, maxLength=10">
        <input type="password" data-validator="password" data-rules="notEmpty, minLength=6">
        <input type="email" data-validator="email" data-rules="notEmpty, email">
        <input type="text" data-validator="phone" data-rules="phone">
        <input type="checkbox" data-validator="fruit" value="apple" data-rules="atLeast=1, atMost=2">
        <input type="checkbox" data-validator="fruit" value="pear">
        <input type="checkbox" data-validator="fruit" value="lemon">
        <select data-validator="selection" data-rules="notEmpty">
            <option value="1"></option>
            <option value="2"></option>
        </select>
    </form>
    var config = {
        msg: {
            name: {
                notEmpty: "name can’t be empty",
                maxLength: "name can't be more than 10 characters"
            },
            password: {
                minLength: "password can’t be less than 6 characters"
            }
            // other messages goes here...
        }
    }

    $("#form").valdiate(config, function (result, data) {
        // if success: result = {pass: true}
        // data = {name: xxx, password: xxx, email: xxx...}
        
        // if fail: {pass: false, msg: xxx}
        // data = undefined
        console.log(result)
    })
10 回复

帮顶!有时间看看

一个表单多条规则怎么写?,比如 密码是数字+字母 而且 长度6-20之间 而且排除123456 这种简单的密码 一共3条规则

@yakczh 分开回答,多条规则写在data-rules中:<input data-rules="notEmpty, minLength=6, maxLength=20">,数字+字母 & 排除简单规则我可能会加上前者,后者这种类型我觉得提供接口给开发者自定义规则比较好

jQuery 支持将 data-validater=’{"required":true,"max-length":20}’ 标准的json字符串直接转化成对象格式, 你完全可以将所有简单验证参数写到一个里面。 用jQuery.fn.data(‘validater’) 就取到对象了。

@shy2850 还能这样呀,学习了,下一次更新考虑加进去。不过这里我希望返回健值对儿和定位错误的input/select,所以还是要多声明一个data-name的属性。

@klamtlne
其实我刚刚开始玩jQuery的时候也写过一个用了几年了 , 因为以前做金融行业表单,验证太过复杂了, https://github.com/shy2850/xhcms_2014/blob/master/js/jquery-form/form-valid.js

它的特点在于把验证过程分成了before-begin-valid-success/failed-end-after 这些环节,支持配置统一的验证提示、验证参数的层叠附加等。 下面是它的一些demo,比较早了,近两年没有再整理 http://i.webfuture.cn/formValid/index.html http://i.webfuture.cn/formValid/001.html http://i.webfuture.cn/formValid/002.html 。。。 http://i.webfuture.cn/formValid/006.html http://i.webfuture.cn/formValid/007.html

好动西,帮忙顶一下

@shy2850

晚点看看,最近再看 angular 的 form validate

回到顶部