由于项目需要，开始用Vue.js+ElementUI来开发前端页面，今天的问题是，如果在Form表单校验中使用自定义方法？如果做后台校验（需要校验数据唯一性)?
最简单的Form表单校验：
//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: '请您完善此项', trigger: 'blur' }] // 必填校验
}
}
}
</script>
这就完成一个最简单的校验，但是需求不是这么简单。
要做唯一性校验，那就要访问数据库了，那么就要考虑写一个自定义的方法了，于是，找到了validator：
rules:{
code:[
// function(rule, value, callback, source, options)
{validator:function(rule, value, callback){...}, trigger: 'blur'}
]
实现代码：
<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: '请您完善此项', trigger: 'blur' }, // 必填校验
{validator:validate, trigger: 'blur'}
],
}
}
}
</script>
