vue3 搭配ElementPlus做基础表单校验 自定义表单校验

上面是第一种普通校验 跟vue2类似 通过ref获取元素 定义规则表 提交时进行校验validate看是否通过了校验

二,自定义校验  一般校验手机号 邮箱等的规范合法性

.........


const validatePhones = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}(,1[3|4|5|6|7|8|9][0-9]\d{8})*$/;
    if (!reg.test(value)) {
      return callback(new Error('手机号码输入格式不正确'));
    } else { 
      return callback(); // *验证成功的地方必须callback()
    }
  }else {
    return callback(new Error('必填字段'));
  }
}
 

const rules = reactive({
  phone: [
    {
      validator: validatePhones,
      trigger: 'blur',
    }
  ],
})

...........

校验规则的函数接受3个参数：`rule`、`value`和`callback`

 - `rule`参数: 这个参数是用来传递验证规则的，包含了一些验证的配置选项，比如最大长度、最小长度等。在这个函数中，我们没有使用到该参数。

- `value`参数: 这个参数是要被验证的手机号码的值。

- `callback`参数: 这个参数是用来通知验证结果的回调函数，它接受一个可选的 `Error` 对象作为参数。如果验证通过，可以通过调用 `callback()` 方法来通知验证成功，而不传递任何参数。如果验证失败，可以通过调用 `callback(new Error('错误信息'))` 方法来通知验证失败，并将错误信息传递给它。

在函数内部，我们首先检查 `value` 的值是否为空字符串 `''`，如果是空字符串，则调用 `callback` 方法，传入一个新的 `Error` 对象，对象的错误信息为 `'必填字段'`。

如果 `value` 不是空字符串，我们使用正则表达式 `/^1[3|4|5|6|7|8|9][0-9]\d{8}(,1[3|4|5|6|7|8|9][0-9]\d{8})*$/` 来验证手机号码的格式。如果格式不正确，我们也会调用 `callback` 方法，传入一个新的 `Error` 对象，对象的错误信息为 `'手机号码输入格式不正确'`。

如果手机号码格式正确，我们调用 `callback()` 方法，通知验证成功，不传递任何参数。

需要拿到引用对象  (通过ref获取任意表单引用对象)，然后通过引用对象来调用该方法。

 比如上面引用的ref='dom' 的表单组件  我们可以    dom.value.clearValidate(); 清除整个表单的验证信息