表單驗證
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>