elementUI里elform的表单验证,赋值的prop不能改变检验状态

例如,el-form-item prop="nickname"
validate后该项为空,显示红色提示语
直接给this.fakeform.nickname赋值,不会改变改项的验证状态。
所以怎么才能在赋值后,只把赋值项的验证变了,而不是使用clearValidate清除所有验证信息

基于Monster 组和GPT的调写:

  • 调用 this.$refs.fakeform.validateField('nickname') 方法来实现,其中 'nickname' 是要验证的字段名。
  • 这个方法会只验证指定的字段,并且只会更新该字段的验证状态,而不会影响其他字段的验证状态。如果该字段的验证状态更新为错误,那么该字段会显示红色提示语。

以下是示例代码:

<template>
  <el-form ref="fakeform">
    <el-form-item label="Nickname" prop="nickname">
      <el-input v-model="nickname"></el-input>
    </el-form-item>
  </el-form>
  <el-button @click="submitForm">Submit</el-button>
</template>

<script>
export default {
  data() {
    return {
      nickname: '',
    };
  },
  methods: {
    submitForm() {
      this.$refs.fakeform.validate((valid) => {
        if (valid) {
          // 表单验证通过
          // 处理表单数据
        } else {
          // 表单验证失败
          // do something
        }
      });
    },
    updateNickname() {
      // 给 nickname 赋值
      this.nickname = 'new nickname';
      // 验证 nickname 字段
      this.$refs.fakeform.validateField('nickname');
    },
  },
};
</script>


可以在校验规则中将trigger触发方式改为trigger:change 改变时触发校验

rules:{
   name: [
            { type: 'date', required: true, message: '请输入姓名', trigger: 'change' }
          ],
}