vue3 语法糖如何自定义校验规则

要自定义校验规则，可以使用 Vue 3 中提供的 `v-model` 指令的 `v-bind` 和 `v-on` 缩写语法糖，结合自定义校验方法实现。具体步骤如下：

1.在需要绑定数据的元素上使用 `v-model` 指令，并使用 `v-bind` 缩写语法糖将数据绑定到 `value` 属性上。

<input v-model="username" />

2.在 `data` 选项中定义需要绑定的数据及其初始值。

data() {
  return {
    username: ''
  }
}

3.使用 `v-on` 缩写语法糖绑定事件，当用户输入数据时触发校验方法。

<input v-model="username" v-on:input="validateUsername" />

4.在 `methods` 选项中定义校验方法，并在其中实现自定义的校验规则。

methods: {
  validateUsername() {
    // 自定义校验规则
    if (this.username.length < 6) {
      // 校验不通过，设置错误信息
      this.$set(this.errors, 'username', '用户名长度不能少于 6 个字符')
    } else {
      // 校验通过，清除错误信息
      this.$delete(this.errors, 'username')
    }
  }
}

其中，`this.errors` 是一个对象，用于存储所有的错误信息。在校验方法中，通过 `this.$set` 方法给 `errors` 对象添加一个 `username` 属性，并设置错误信息。如果校验通过，使用 `this.$delete` 方法删除 `errors` 对象中的 `username` 属性，清除错误信息。

注意：在使用 `v-model` 指令绑定数据时，需要提前定义数据的初始值，否则会出现无法绑定数据的情况。