基于avalon的验证框架:validation
基于avalon的验证框架开发完毕,支持实时验证,失去焦点验证,提交验证,手动验证,异步验证(基于ES6的Promise)。可以在配置对象上的validationHooks中添加验证规则。
验证规则如下定义:
get: function (value, data, next) { |
next(/^[a-z0-9]+$/i.test(value)) |
</div> </div>
在validationHooks中自定验证规则,每个都必须写 message( message不能为空字符串)与 get方法。
验证规则不惧怕任何形式的异步,只要你决定进行验证时,执行next方法就行。next 需要传入布尔。
get: function (value, data, next) { |
</div> </div>
另一个例子:
message: "当前位置必须是在{{city}}" , |
get: function (value, data, next) { |
jsonpCallback: "callback" , |
success: function (data, textStatus, jqXHR) { |
</div> </div>
注意,本组件是基于 avalon1.3.7
开发,如果是很旧的版本,可以使用avalon.validation.old.js,它一直兼容到avalon1.2.0。
注意,本组件只能绑定在 form元素
上, <form ms-widget="validation"></>
验证框架提供了各式各样的回调,满足你最挑剔的需求:
onSuccess, onError, onComplete, onValidateAll, onReset, onResetAll |
</div> </div>
其中,前面四个是一个系列,它们都有1个参数,是一个对象数组,里面一些 验证规则对象
(如果成功,数组为空); onReset是在元素获取焦点做重置工作的,如清理类名, 清空value值,onResetAll是用于重置整个表单,它会在组件执行它辖下的所有元素的onReset回调后再执行。
验证规则对象的结构如下:
message: '当前位置必须是在{{city}}' , |
getMessage: function () {} |
</div> </div>
如果用户指定了 norequired
验证规则,如果input为空, 那么就会跳过之后的所有验证
er
avalon.validation自带了许多 验证规则
,满足你一般的业务需求。
大家可以在onReset的回调里得到第二个参数data, 然后调用data.valueResetor()将VM中的数据也置空,如布尔数据变false, 数值数据变0,数组数据变[],字符串数组变成""
也可以在页面添加不依赖于ms-duplex的绑定
valueAccessor: function () {} |
</div> </div> </div>
- 自带验证规则required,int,decimal,alpha,chs,ipv4
- 自带验证规则qq,id,email,url,date,passport,pattern
- 自带验证规则maxlength,minlength,lt,gt,eq,equal
- 自带验证规则contains,contain
- 自带验证规则repeat(重复密码)
- 自定义验证规则
- 自带验证规则norequied
项目主页:http://www.open-open.com/lib/view/home/1416408452617