实现主要分为三步
1、设置required :error="customError" @blur="checkCustomValid",(select下拉框用change事件,其他的根据情况选择事件) 2、非表单校验方法checkCustomValid() 3、提交校验this.checkCustomValid(),对应代码的1、2、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="name">
<el-input v-model="form.name"></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: {
name: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
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>