由于項(xiàng)目需要冷蚂，開始用Vue.js+ElementUI來開發(fā)前端頁面，今天的問題是，如果在Form表單校驗(yàn)中使用自定義方法克饶？如果做后臺校驗(yàn)（需要校驗(yàn)數(shù)據(jù)唯一性)?
最簡單的Form表單校驗(yàn)：
//form.vue
//...
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="編碼" prop="code">
<el-input v-model="form.code"></el-input>
</el-form-item>
</el-form>
//js
<script>
export default {
data () {
return{
form:{
code: ''
},
rules:{
code: [{ type: 'string', required: true, message: '請您完善此項(xiàng)', trigger: 'blur' }] // 必填校驗(yàn)
}
}
}
</script>
這就完成一個最簡單的校驗(yàn)琅锻，但是需求不是這么簡單卦停。
要做唯一性校驗(yàn)，那就要訪問數(shù)據(jù)庫了恼蓬，那么就要考慮寫一個自定義的方法了惊完，于是，找到了validator：
rules:{
code:[
// function(rule, value, callback, source, options)
{validator:function(rule, value, callback){...}, trigger: 'blur'}
]
實(shí)現(xiàn)代碼：
<script>
// ...
export default {
data () {
let validate = (rule, value, callback) => {
//后臺方法
validateCode(value).then(res => {
if (res && res.data === 'TRUE') {
callback()
} else if (res && res.data === 'FALSE') {
callback('編碼已存在')
}
})
}
return{
form:{
code: ''
},
rules:{
code: [
{ type: 'string', required: true, message: '請您完善此項(xiàng)', trigger: 'blur' }, // 必填校驗(yàn)
{validator:validate, trigger: 'blur'}
],
}
}
}
</script>
