el-form resetFields无效和validate无效的可能原因及解决方法

当使用el-form表单组件时，有时候会遇到resetFields无效或者validate无效的情况。这种问题很容易出现在比较复杂的表单中，通常有以下两种情况：

resetFields无效的可能原因及解决方法

1. 表单组件未正确绑定ref属性

resetFields方法要求表单组件必须绑定ref属性，以便可以通过this.$refs.form.resetFields()来访问表单组件对象，从而实现表单重置的功能。如果未正确绑定ref属性，就会出现resetFields无效的情况。

示例代码：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="text" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请填写用户名", trigger: "blur" }],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // do something
        }
      });
    },

    reset() {
      // 未正确绑定ref属性
      this.$refs.form.resetFields();
    },
  },
};
</script>

解决方法：将el-form表单组件正确绑定ref属性即可。

<el-form :model="form" :rules="rules" ref="form">

2.涉及动态表单，表单元素的绑定未设置key

当渲染动态表单时，如果表单元素未设置key，则可能会造成resetFields无效的情况。这是因为表单元素缺少唯一的key值，Vue认为每个表单元素都没有发生变化，因此不会触发重置事件。

示例代码：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item v-for="(item, index) in formItems" :key="index">
        <el-input :placeholder="item.label" v-model="form[item.name]"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="text" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      formItems: [
        { name: "username", label: "用户名" },
        { name: "password", label: "密码" },
      ],
      rules: {
        username: [{ required: true, message: "请填写用户名", trigger: "blur" }],
        password: [{ required: true, message: "请填写密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // do something
        }
      });
    },

    reset() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

解决方法：为动态表单元素加上唯一的key值。

<el-form-item v-for="(item, index) in formItems" :key="index">
  <el-input :placeholder="item.label" v-model="form[item.name]"></el-input>
</el-form-item>

validate无效的可能原因及解决方法

1. 验证规则未正确设置

当表单的验证规则未正确设置时，validate方法会失效。可能是规则未正确设置，规则不符合实际要求等原因造成的。

示例代码：

<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="text" @click="validateForm">验证</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请填写用户名", trigger: "blur" }],
        // password的验证规则未设置
        // password: [{ required: true, message: "请填写密码", trigger: "blur" }],
      },
    };
  },

  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // do something
        }
      });
    },

    validateForm() {
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (!valid) {
          this.$message.error('验证失败')
        } else {
          this.$message.success('验证成功')
        }
      })
    }
  },
};
</script>

解决方法：正确设置表单元素的验证规则即可。

rules: {
  username: [{ required: true, message: "请填写用户名", trigger: "blur" }],
  password: [{ required: true, message: "请填写密码", trigger: "blur" }],
},

2.表单组件的prop属性未设置

el-form-item组件的prop属性用于绑定表单元素的验证规则，如果未设置，则会导致validate方法失效。

示例代码：

<template>
  <div>
    <el-form :model="form" ref="form">
      <el-form-item>
        <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="remember">
        <el-checkbox v-model="form.remember">记住密码</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button type="text" @click="validateForm">验证</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        remember: false,
      },
    };
  },

  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // do something
        }
      });
    },

    validateForm() {
      this.$refs.form.validate((valid) => {
        console.log(valid);
        if (!valid) {
          this.$message.error('验证失败')
        } else {
          this.$message.success('验证成功')
        }
      })
    }
  },
};
</script>

解决方法：为el-form-item组件设置正确的prop属性即可。

<el-form-item label="密码" prop="password">
  <el-input type="password" v-model="form.password"></el-input>
</el-form-item>