引言

在使用Vue和Element UI开发前端页面时，经常会遇到需要对表单进行校验的场景。Element UI提供了一套方便易用的表单校验规则（Rules）机制，帮助我们实现表单校验的功能。然而，有时候我们需要根据不同的条件动态地设置表单的校验规则。本文将介绍如何在Vue和Element UI的Form表单中实现动态rules的设置。

准备工作

在开始之前，我们需要先安装并引入Vue和Element UI。你可以通过以下命令安装Element UI：

npm i element-ui -S

然后，在Vue的入口文件中引入Element UI的样式和组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
  render: h => h(App)
}).$mount('#app')

动态rules的设置

Element UI的Form表单组件提供了一个rules属性，可以用来设置校验规则。它是一个包含字段名称和校验规则的对象。我们通常会将这个对象定义在Vue组件的data属性中，然后在模板中使用。

在实现动态rules的设置之前，我们需要了解一下Vue的计算属性（computed）。计算属性本质上是一个函数，它的返回值会根据其依赖关系进行缓存，只有当依赖发生变化时，才会重新计算。我们可以利用计算属性来实时更新rules对象。

首先，在Vue组件的data属性中定义一个包含字段名称和初始校验规则的对象rules，并在模板中使用它：

export default {
  data() {
    return {
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  }
}

接下来，我们可以在计算属性中动态修改rules对象。例如，根据用户名是否为空，决定密码输入框是否需要进行校验：

export default {
  data() {
    return {
      username: '',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: !this.username, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    dynamicRules() {
      const rules = { ...this.rules }
      rules.password[0].required = !this.username
      return rules
    }
  }
}

在上述代码中，我们新定义了一个计算属性dynamicRules，它是根据原始的rules对象进行修改得到的。在这个计算属性中，我们判断了用户名是否为空，如果为空，则将密码输入框的校验规则设置为required: true；如果不为空，则将密码输入框的校验规则设置为required: false。

最后，在模板中将动态的dynamicRules应用到Form表单组件的rules属性：

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

通过以上设置，当用户名为空时，密码输入框将显示校验错误；当用户名不为空时，密码输入框将不进行校验。

结语

通过以上步骤，我们成功实现了Vue和Element UI的Form表单中动态设置校验规则，可以根据不同的条件灵活地设置其验证规则。希望这篇文章对你有所帮助！如果你有任何问题或建议，请随时留言。谢谢阅读！

本文来自极简博客，作者：魔法少女，转载请注明原文链接：Vue Element UI 的Form表单中动态rules的设置