1、问题说明:
在开发表单的时候,可能会遇到el-form-item中绑定的值不在表单绑定的数据对象中。
此时用prop绑定该字段名是无效的,需要单独对这个字段进行校验。
在el-form-item中有一个属性 error 。用于表单域验证错误信息,设置该值会使表单验证状态变为error,并显示该错误信息。
2、方法:
(1)设置required,给label增加校验的*图标
(2)设置error属性,初始值设为空,在表单校验时做一个判断,如果字段为空时给error赋值校验失败提示文字。
(3)同时加一个失去焦点时的方法 @blur="" (input输入框,select下拉框用change事件,其他的根据情况选择事件),在进行表单操作时也做校验。
3、代码
<template>
<el-form ref="form" :rules="rules" :model="form" label-width="110px">
<!-- 1、设置required :error="customError"-->
<el-form-item label="非表单校验" required :error="customError">
<el-input v-model="customValid" @blur="checkCustomValid"></el-input>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">确定</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
desc: ''
},
rules: {
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
// 要非表单校验的参数
customValid: '',
// 显示非表单校验的内容
customError: ''
}
},
methods: {
// 2、非表单校验
checkCustomValid(){
if (!this.customValid.trim()) {
this.customError = '非表单校验不能为空'
return false
} else {
this.customError = ''
return true
}
},
// 提交
onSubmit() {
this.$refs.form.validate((valid) => {
// 3.提交校验this.checkCustomValid()
if (this.checkCustomValid() && valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
}
</script>