el-form设置校验change，值改变后校验结果未消失

在 Element UI 的表单组件 `<el-form>` 中，你可以通过设置 `:validate-on-rule-change="false"` 来禁用在规则改变时自动触发校验。这样，当表单项的值改变时，校验结果不会立即消失，而是等待用户手动提交表单或者手动触发校验时才会更新校验结果。

示例代码：

<template>
  <el-form :model="form" :rules="rules" :validate-on-rule-change="false">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username" @change="handleInputChange('username')"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password" @change="handleInputChange('password')"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度为 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度为 6 到 20 个字符', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    handleInputChange(field) {
      // 手动触发校验
      this.$refs.form.validateField(field);
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单校验通过，提交表单数据
          console.log(this.form);
        } else {
          // 表单校验未通过，提示用户错误信息
          this.$message.error('表单校验未通过，请检查输入！');
        }
      });
    }
  }
};
</script>

在上述示例中，我们将 `validate-on-rule-change` 属性设置为 `false`，并且在表单项的值改变时手动触发校验。当用户点击提交按钮时，我们再次手动触发表单校验，以确保最终提交的数据符合校验规则。