关于element-ui表单验证失效的问题

关于element-ui表单验证失效的问题

最近在vue中使用element-ui的form表单验证，出现了某个字段验证无效的问题，验证死活不通过，经过排查，终于找出来问题所在。

提交表单对象的时候通常会有很多字段，而为了图方便，我们有时候只会在data里面定义一个对象，比如ruleForm:{}这样，没有具体定义对象的属性，然后在html里面这样绑定：

<el-form-item label="输入" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>

加上表单验证，完整的代码如下：

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
  <el-form-item label="输入" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
        },
        rules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
          ]
        }
      };
    },
    created(){
      
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

这样的验证时完全没有问题的，但是如果遇到某些场景，你需要传递name给后端，但是是通过js方法设置name字段的值：

setForm() {
        this.ruleForm.name = '1111'
      }

这样虽然赋值给了name属性，但是由于name属性实在对象创建之后添加的，是不会更新到视图上面去，就导致了你在调试工具里面看到对象的值有，但是提交表单的时候通过不了验证，需要$set进行属性的赋值，完整代码：

<template>
  <div>
    <el-form :model="ruleForm" :rules="rules" label-width="100px" ref="ruleForm">
  <el-form-item label="输入" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="setForm()">赋值</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {

        },
        rules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
          ]
        }
      };
    },
    created(){
    },
    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();
      },
      setForm() {
        // this.ruleForm.name = '1111'  //不能通过验证
        this.$set(this.ruleForm,'name','1111')//能通过表单验证
        console.log(this.ruleForm)
      }
    }
  }
</script>

对于vue属性的动态添加，不仅会影响视图层的更新，还会对element-ui表单验证有一定的影响，特别是字段并没有在页面中显示，会在一定程度上影响我们找到问题的所在