avalon2学习教程12数据验证

avalon2砍掉了不少功能（如ms-include,ms-data），腾出空间加了其他更有用的功能。数据验证就是其中之一。现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery validation。

avalon内置验证规则有

规则	描述
required(true)	必须输入的字段。
email(true)	必须输入正确格式的电子邮件。
url(true)	必须输入正确格式的网址。
date(true或正则)	必须输入正确格式的日期。默认是要求YYYY-MM-dd这样的格式。
number(true)	必须输入合法的数字（负数，小数）。
digits(true)	必须输入整数。
pattern(正则或true)	让输入数据匹配给定的正则，如果没有指定，那么会到元素上找pattern属性转换成正则再匹配。
equalto(ID名）	输入值必须和 #id 元素的value 相同。
maxlength：5	输入长度最多是 5 的字符串（汉字算一个字符）。
minlength：10	输入长度最小是 10 的字符串（汉字算一个字符）。
chs（true）	要求输入全部是中文。
max:5	输入值不能大于 5。
min:10	输入值不能小于 10。

这些验证规则要求使用ms-rules指令表示，要求为一个普通的JS对象。

此外要求验征框架能动起来，还必须在所有表单元素外包一个form元素，在form元素上加ms-validate指令。

    
        
        
         
        
        
    

    
        

            
{{@aaa}}
            

            

            

        
    

因此，要运行起avalon2的内置验证框架，必须同时使用三个指令。ms-validate用于定义各种回调与全局的配置项（如什么时候进行验证）。ms-duplex用于将单个表单元素及相关信息组成一个Field对象，放到ms-validater指令的fields数组中。ms-rules用于定义验证规则。如果验证规则不满足你，你可以自行在avalon.validators对象上添加。

现在我们可以一下ms-validate的用法。其对应一个对象。

配置项	描述
fields	框架自行添加，用户不用写。为一个数组，放置ms-duplex生成的Field对象。
onSuccess	空函数，单个验证成功时触发，this指向被验证元素this指向被验证元素，传参为一个对象数组外加一个可能存在的事件对象。
onError	空函数，单个验证无论成功与否都触发，this与传参情况同上
onComplete	空函数，单个验证无论成功与否都触发，this与传参情况同上。
onValidateAll	空函数，整体验证后或调用了validateAll方法后触发；有了这东西你就不需要在form元素上ms-on-submit="submitForm"，直接将提交逻辑写在onValidateAll回调上
onReset	空函数，表单元素获取焦点时触发，this指向被验证元素，大家可以在这里清理className、value
validateInBlur	true，在blur事件中进行验证,触发onSuccess, onError, onComplete回调
validateInKeyup	true, 在keyup事件中进行验证,触发onSuccess, onError, onComplete回调。当用户在ms-duplex中使用change debounce过滤器时会失效
validateAllInSubmit	true，在submit事件中执行onValidateAll回调
resetInFocus	true，在focus事件中执行onReset回调
deduplicateInValidateAll	false，在validateAll回调中对reason数组根据元素节点进行去重

在上表还有一个没有提到的东西是如何显示错误信息，这个avalon不帮你处理。但提示信息会帮你拼好，如果你没有写，直接用验证规则的message，否则在元素上找data-message或data-required-message这样的属性。

最后给一个复杂的例子：

    
        
        
         
        
        
    

    
        

            

                
验证完整的表单
                

                    名字
                    
                
                

                    姓氏
                    
                
                

                    用户名
                    
                
                

                    密码
                    
                
                

                    验证密码
                    
                
                

                    Email
                    
                
                

                    请同意我们的声明
                    
                
                

                    我乐意接收新信息
                    
                
                

                    
主题 (至少选择两个) 
                    
                        Marketflash
                    
                    
                        Latest fuzz
                    
                    
                        Mailing list digester
                    
                    至少选择两个