avalon的表单验证

表单验证

avalon内置了强大的表单验证功能，它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用。

ms-duplex负责监控每个表单元素的输入。
ms-rules负责对表单元素的值进行各种检测，包括非空验证，长度验测，格式匹配等等。
ms-validate负责控制验证的时机，及针对每个表单元素的验证结果触发各种回调。

验证规则定义在avalon.validators对象中, 为一个个带有message与get属性的对象.

 1 avalon.shadowCopy(avalon.validators, {
 2     pattern: {
 3         message: '必须匹配{{pattern}}这样的格式',
 4         get: function (value, field, next) {
 5             var elem = field.dom
 6             var data = field.data
 7             if (!isRegExp(data.pattern)) {
 8                 var h5pattern = elem.getAttribute("pattern")
 9                 data.pattern = new RegExp('^(?:' + h5pattern + ')$')
10             }
11             next(data.pattern.test(value))
12             return value
13         }
14     },
15     digits: {
16         message: '必须整数',
17         get: function (value, field, next) {//整数
18             next(/^-?d+$/.test(value))
19             return value
20         }
21     }
22  })

手动调用验证并根据点击不同按钮提交不同网址的例子

<!DOCTYPE html>
<html>
    <head>
        <title>ms-validate</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
        <script src="../dist/avalon.js"></script>
        <script>
            avalon.validators.gtOne = {
                message: '必须数字并大于1',
                get: function (value, field, next) {
                    //想知道它们三个参数是什么,可以console.log(value, field,next)
                    var ok = Number(value) > 1
                    next(ok)
                    return value
                }
            }
            var greasons = []
            var vm = avalon.define({
                $id: "test",
                aaa: '',
                url: 'javascript:void(0)',
                message: '',
                submit:  function (url) {//submit是真正的验证方法,通过点击时手动验证
                    vm.validate.onManual()
                    setTimeout(function () {
                        if (greasons.length) {
                            var a = greasons.map(function (el) {
                                return '<p>' + el.getMessage() + '</p>'
                            })
                            vm.message = a.join('')//打印所有错误
                            vm.url = 'javascript:void(0)'
                        } else {
                            greasons = []
                            vm.message = ''
                            vm.url = url
                        }
                    })

                },
                validate: {
                    //禁止提交时自动验证
                    validateAllInSubmit: false,
                    //这个是用来占位的
                    onManual: avalon.noop,
                    //这个转移到sumbit方法
                    onValidateAll: function (reasons) {
                        greasons = reasons.concat()
                    }
                }
            })
        </script>
    </head>

    <body ms-controller="test">
        <form class="cmxform" ms-validate="@validate" ms-attr='{action: @url}' >
            <fieldset>
                <legend>自定义规则</legend>
                <p>
                    <input 
                        ms-duplex="@aaa"
                        ms-rules="{required: true, number:true, gtOne: true}" 
                        />
                </p>
                <p>
                    <input :click="@submit('/add.php')" type="submit" value="add"/>
                    <input :click="@submit('/update.php')" type="submit" value="update"/>
                </p>
                <p ms-html="@message" style="color: red"></p>
            </fieldset>
        </form>
    </body>
</html>