vue动态表单验证

Vue动态表单验证可以通过使用Vue的指令和计算属性来实现。以下是一个简单的示例：

1. 首先，我们需要定义一个包含表单字段的数据对象，并设置验证规则：

data() {
  return {
    formData: {
      name: '',
      email: '',
      password: '',
      confirmPassword: ''
    },
    rules: {
      name: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱格式', trigger: ['blur', 'change'] }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: this.validateConfirmPassword, trigger: 'blur' }
      ]
    }
  }
},

2. 接下来，我们需要在模板中使用Vue指令来绑定表单字段和验证规则：

<el-form ref="form" :model="formData" :rules="rules">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="formData.password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="confirmPassword">
    <el-input type="password" v-model="formData.confirmPassword"></el-input>
  </el-form-item>
</el-form>

3. 最后，我们需要定义验证函数，并将其作为验证规则的一部分：

methods: {
  validateConfirmPassword(rule, value, callback) {
    if (value !== this.formData.password) {
      callback(new Error('两次输入的密码不一致'))
    } else {
      callback()
    }
  }
}

通过这种方式，我们可以轻松地实现动态表单验证，并在用户输入时进行实时验证。