Element-UI常用表单校验方法

€云起

已于 2022-07-23 16:41:35 修改

阅读量503

点赞数 1

分类专栏：前端文章标签： elementui

于 2022-07-23 16:40:54 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45061924/article/details/125949546

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Element-UI中实现复杂的表单校验，包括密码的复杂度要求、手机号码格式验证、邮箱格式检查以及身份证号码的正则表达式匹配。通过实例展示，帮助开发者快速掌握Element-UI中的校验技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Element-UI常用表单校验方法

密码设置

password: [
  { required: true, message: '密码不能为空', trigger: 'change' },
  {
    required: true,
    pattern: /^(?!([a-zA-Z]+|[a-z\d]+|[a-z~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+|[A-Z\d]+|[A-Z~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+|[\d~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]+)$)[a-zA-Z\d~`@#\$%\^&\*\(\)_\-\+=\{\[\}\]\|\\:;\"\'<,>\.\?\/\!]{8,20}$/,
    message: '密码包含大小写字母、特殊符号、数字中的任意三项   8-20位!',
    trigger: 'change'
  },
  {
    required: true,
    pattern: /^[^\u4e00-\u9fa5]{0,}$/,
    message: '输入有误!不能输入中文',
    trigger: 'change'
  }
],

手机号码

mobileNum: [
  { required: true, message: '请输入手机号码', trigger: 'blur' },
  {
    required: true,
    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    message: '手机号码输入有误!',
    trigger: 'change'
  }
],

邮箱

email: [
    {
       required: true,
       pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
       message: "请输入正确邮箱格式",
       trigger: "change"
    }
],

身份证

cardNum: [
   {
     required: true,
     pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
    message: "输入身份证格式有误",
     trigger: "change"
   }
 ],