vue rules属性

`rules` 属性是 Vue.js 中表单验证的一个重要属性。它允许你为表单控件定义一组验证规则，用于检查用户输入是否符合要求。在表单验证过程中，Vue.js 会根据这些规则来自动验证用户的输入，并在出现错误时提示用户。

`rules` 属性通常用在 `el-form` 组件中的表单控件上，例如 `el-form-item` 组件中的输入框、下拉框等。在 `rules` 属性中，每个规则都是一个对象，包含两个属性：`validator` 和 `trigger`。

`validator` 属性是一个函数，用于检查用户输入是否符合要求。这个函数接收两个参数：用户输入的值和一个回调函数。如果用户输入的值符合要求，回调函数应该被调用并传入一个空字符串作为参数；否则，回调函数应该被传入一个错误信息字符串作为参数。

`trigger` 属性是一个字符串，用于指定何时触发验证。它可以取以下值之一：

- `'blur'`：表示在表单控件失去焦点时触发验证。
- `'change'`：表示在表单控件的值改变时触发验证。
- `'submit'`：表示在提交表单时触发验证。

举个例子，下面是一个使用 `rules` 属性的示例：

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

data() {
  return {
    form: {
      username: '',
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 10, message: '用户名长度在 3 到 10 个字符之间', trigger: 'blur' },
      ],
    },
  };
}

在这个示例中，`rules` 属性被用来定义了一个名为 `username` 的规则，该规则要求用户名必须输入、长度在 3 到 10 个字符之间。当用户在输入框中输入不符合要求的用户名时，会在输入框下方出现相应的错误提示信息。