Vue宝典之深入理解 rules 属性

引言

在 Vue 中，我们经常会使用表单来收集用户的输入信息。为了确保用户输入的准确性和完整性，我们需要对输入进行校验。Vue 提供了一种便捷的方式来进行表单校验，即使用 rules 属性。本文将深入介绍 Vue 中的 rules 属性，并提供几个示例来帮助读者更好地理解其用法。

什么是 rules 属性

在 Vue 中，表单校验规则可以通过 rules 属性来定义。该属性是一个对象，包含了各个表单字段的校验规则。每个字段的校验规则是一个数组，可以包含多个校验规则。

如何定义 rules 属性

我们可以在 Vue 实例的 data 中定义 rules 属性，并为每个表单字段指定相应的校验规则。以下是一个简单的示例：

data() {
  return {
    form: {
      username: '',
      email: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名' },
        { min: 3, max: 10, message: '用户名长度在3到10个字符之间' }
      ],
      email: [
        { required: true, message: '请输入邮箱' },
        { type: 'email', message: '请输入有效的邮箱地址' }
      ]
    }
  }
}

在上面的示例中，我们定义了一个名为 rules 的属性，并为 username 和 email 字段分别指定了校验规则。

rules 属性的常用校验规则

• required：是否必填，通常使用布尔值 true 或 false。
• min、max：字段的最小值和最大值。
• type：字段的类型，例如 email、date、number 等。
• pattern：字段的正则表达式规则。
• validator：自定义校验函数，用于满足更复杂的校验需求。

在模板中使用 rules 属性

在 Vue 的模板中，我们可以通过在表单标签上使用 :rules 属性来绑定对应字段的校验规则。例如：

<el-form-item label="用户名" :rules="rules.username">
  <el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="邮箱" :rules="rules.email">
  <el-input v-model="form.email"></el-input>
</el-form-item>

在上面的示例中，我们通过 :rules=“rules.username” 将 rules 属性绑定到了 username 字段的表单项上。

校验表单

在 Vue 中，我们可以通过 $refs 对象访问表单组件，并调用 validate 方法来进行表单校验。例如：

this.$refs.form.validate((valid) => {
  if (valid) {
    // 校验通过，执行提交操作
  } else {
    // 校验不通过，进行相应提示
  }
})

在上面的示例中，我们通过 this.$refs.form.validate() 调用了表单的校验方法。在回调函数中，valid 参数表示校验结果是否通过。

自定义错误提示

除了使用 rules 属性提供的默认错误提示，我们还可以自定义错误提示。在 rules 属性中，可以通过 message 字段来指定自定义的错误提示信息。例如：

{ required: true, message: '请输入用户名', trigger: 'blur' }

上面的示例中，我们添加了 trigger 字段，用于指定何时触发校验，例如 ‘blur’ 表示失去焦点时触发校验。

结论

通过使用 Vue 中的 rules 属性，我们可以方便地定义表单字段的校验规则，并在模板中绑定校验规则，从而实现表单的校验功能。

---

博客主页：魔王-T

大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞收藏⭐评论✍️

---