<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>validate</title>
<link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.1/css/amazeui.min.css">
</head>
<body>
<div ms-controller="vm" class="am-container">
<form class="am-form am-form-horizontal" :validate="@validate">
<div class="am-form-group">
<label class="am-u-sm-2 am-form-label">姓名</label>
<div class="am-u-sm-10">
<input type="text" placeholder="输入姓名" :duplex="@username" :rules='{required:true,chs:true,minlength:2,maxlength:5}' required-message="姓名必须填写" chs-message="姓名必须中文" minlength-message="姓名最少2个字" maxlength-message="姓名最多5个字" />
</div>
</div>
<div class="am-form-group">
<label class="am-u-sm-2 am-form-label">密码</label>
<div class="am-u-sm-10">
<input type="password" :duplex="@password" :rules='{required:true}' required-message="密码必须填写" />
</div>
</div>
<div class="am-form-group">
<div class="am-u-sm-10 am-u-sm-offset-2">
<button type="submit" class="am-btn am-btn-default">提交</button>
<span class="am-margin-left am-text-danger">{{@errmsg}}</span>
</div>
</div>
</form>
</div>
<script src="http://cdn.bootcss.com/avalon.js/2.1.6/avalon.min.js"></script>
<script>
var vm = avalon.define({
$id: 'vm',
username: '',
password: '',
errmsg: '',
validate: {
onValidateAll: function(reasons) {
// 针对整个表单提交
// 返回一个数组，如果长度为零说明没有错
if (reasons.length) {
vm.errmsg = reasons[0].getMessage();
} else {
// console.log('全部通过');
vm.errmsg = '';
alert('全部通过');
// do your ajax function
}
},
onError: function(reasons) {
// 针对单个表单元素(使用了ms-duplex的input, select)
vm.errmsg = reasons[0].getMessage();
},
onSuccess: function() {
// 针对单个表单元素
vm.errmsg = '';
},
onComplete: avalon.noop, // 针对单个表单元素
onReset: avalon.noop, // 针对单个表单元素
validateInBlur: true, // {Boolean} true，在blur事件中进行验证,触发onSuccess, onError, onComplete回调
validateInKeyup: true, // {Boolean} true，在keyup事件中进行验证,触发onSuccess, onError, onComplete回调
validateAllInSubmit: true, // {Boolean} true，在submit事件中执行onValidateAll回调
resetInFocus: true, // {Boolean} true，在focus事件中执行onReset回调,
deduplicateInValidateAll: false // {Boolean} false，在validateAll回调中对reason数组根据元素节点进行去重
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
