vue：element-ui表单动态验证规则

在Vue中使用Element UI时，可以通过动态绑定来设置表单项的验证规则。以下是一个简单的例子，展示了如何动态设置表单项的验证规则：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-button @click="addRule">添加规则</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          name: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      addRule() {
        // 假设我们要添加的规则是检查姓名长度
        this.rules.name.push({ min: 2, max: 5, message: '姓名长度在 2 到 5 个字符', trigger: 'blur' });
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('提交成功!');
          } else {
            console.log('表单验证失败!');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，我们定义了一个带有name字段的表单，并为其设置了一个必填的验证规则。点击按钮会调用addRule方法，该方法会向name字段的验证规则数组中添加一个新规则，用于检查姓名的长度。提交表单时，会先执行表单的验证，只有当验证通过时才会执行提交操作。