[前端|vue] 验证器validator使用笔记（笔记）

梦醒贰零壹柒

已于 2024-05-17 22:50:20 修改

阅读量108

点赞数 3

分类专栏：前端文章标签：前端 vue.js

于 2024-05-17 20:28:43 首次发布

本文链接：https://blog.csdn.net/macaiyun0629/article/details/139012592

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

文档

validator.js文档地址

规则编写示例

element-plus 使用示例

const captchaLoginRules = {
  phoneNumber: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    {
      validator: (_rule: any, value: string, _callback: any): boolean => {
        return isMobilePhone(value, 'zh-CN')
      },
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
  captcha: [
    { required: true, message: '验证码不能为空', trigger: 'blur' },
    { min: 6, max: 6, message: '验证码长度必须为6个字符', trigger: 'blur' },
  ],
}

tdesign-vue-next 使用示例

const FORM_RULES = {
  username: [
    { required: true },
    {
      validator: (value: string): boolean => {
        return isMobilePhone(value, 'zh-CN') || isEmail(value);
      },
      message: '请输入正确的 Email 或手机号'
    }
  ],
  code: [{ required: true }]
};