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>