品牌微信网站开发北辰做网站

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>