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

在 Vue 3 中，可以使用 `v-model` 指令的 `v-bind` 和 `v-on` 缩写语法糖结合 Element-Plus 中的 `el-form` 组件自定义校验规则。具体步骤如下：

1.在 `template` 中使用 `el-form` 组件包裹表单，并添加需要校验的表单项。

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

其中，`:model` 属性绑定表单数据，`:rules` 属性绑定校验规则。

2.在 `data` 选项中定义表单数据及校验规则。

data() {
  return {
    formData: {
      username: ''
    },
    rules: {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { validator: this.validateUsername, trigger: 'blur' }
      ]
    }
  }
},

其中，`rules` 对象中的 `username` 属性表示需要校验的表单项，`required` 表示必填（不能为空），`validator` 表示自定义校验方法，`trigger` 表示校验触发时机（此处为失去焦点时触发校验）。

3.定义自定义校验方法 `validateUsername`。

methods: {
  validateUsername(rule, value, callback) {
    if (value.length < 6) {
      callback(new Error('用户名长度不能少于 6 个字符'))
    } else {
      callback()
    }
  }
}

其中，`rule` 表示当前校验规则，`value` 表示当前表单项的值，`callback` 是一个回调函数，用于返回校验结果。如果校验不通过，调用 `callback` 方法并传递一个 `Error` 对象，表示校验不通过并设置错误信息。如果校验通过，调用 `callback` 方法并不传递任何参数。

注意：在自定义校验方法中，需要使用 `callback` 方法返回校验结果，否则会出现校验无效的情况。

以上就是使用 Element-Plus 中的 `el-form` 组件结合 Vue 3 的语法糖自定义校验规则的方法。