解决element的表单校验输入框有值但校验未通过的问题

前言

实际项目中，为了精简代码，会涉及到在同一个表单中同时完成 查看编辑 新增等功能，
此篇解决：
1. 编辑的时候，明明给页面回显赋值了，但是校验非空却没有通过的问题。
2. 表单刚一进页面就校验非空，显示红色提示的问题。
3.常规表单关于校验的规则。

正文

demo是官方的表单提交例子，这里主要强调一下，常见的问题和解决方法。

一、 如果遇见各种校验问题首先检查：

• :model="ruleForm" 绑定的ruleForm值是否挂载成功并且操作的是否是这个表单。

• :rules="rules" 校验的规则格式绑定的rules是否定义并且格式正确为对象数组。

• el-form-item中的prop="name"是否和rules中的name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, ], 的名称一致，两个name是相同的，element的校验就是根据这个prop找对应的输入框的。

• <el-input v-model="ruleForm.name"></el-input> 的v-model="ruleForm.name"确保对象ruleForm中有name这个属性！
  关于表单校验的大部分bug的原因就是这四步绑定的值有问题，完全都是细心问题！！！

二、 解决编辑的时候，明明给页面回显赋值了，但是校验规则没有通过的问题

这个问题归结到底是因为 我在初始化绑定值得时候，给ruleForm: {}空对象,由于每一个item的v-modle =“ruleForm.name”，在编辑回显的时候触发了校验规则，但是ruleForm.name这个属性找不到，所以就报错了，就这么简单啊。。。。尴尬

//错误！！！！！ ruleForm: {},
export default {
    data() {
      return {
        ruleForm: {},
        }
  }
正确！！！！！
export default {
    data() {
      return {
        ruleForm: {
        	 name: '',
          	 region: '',
          	 date1: '',
         	 date2: '',
         	 delivery: false,
         	 type: [],
          	resource: '',
          	desc: ''
          },
        }
  }

三、在编辑的时候，刚一进页面就校验非空

你从后端拿的数据编辑反显，赋值给表单绑定的对象，绑定值改变触发了表单验证，但后端给的值是空的，所以验证报错了
解决方法：
1.在保证文中其他规则都正确的情况下，看看你的rules里面的trigger是不是"change"，如果是的话改成其它的。
2.在反显赋值的时候，将表单的第一次校验清除掉
这里使用了es6的箭头函数和简写

this.ruleForm = ...//赋值
this.$nextTick(()=>this.$refs.ruleForm.clearValidate())

附：特殊的表单校验–循环数据校验、不确定key的表单校验等

https://blog.csdn.net/weixin_43216105/article/details/88993785

demo：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

over~ 有问题留言