Vue-ANTD 表单输入中自定义校验一些正则表达式规则_antd 表单校验使用正则-优快云博客

本文链接：https://blog.youkuaiyun.com/StreamlineWq/article/details/101537514

本文介绍在Vue-ANTD表单中使用正则表达式进行输入校验的方法，包括电话号码、邮箱、数字范围及复杂字符组合等常见场景的规则示例。

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

Vue-ANTD 表单输入中自定义校验一些正则表达式规则

写一个示例：
表单的rules里面添加自定义校验的方法：

{ rules: [  {validator: this.checkPhone} ] }

在下面的method里面添加方法：

    checkPhone (rule, value, callback) {
      const pwdRegex = new RegExp('^[1-9]\\d{0,11}$')
         if (!pwdRegex.test(value)) {
        callback(new Error('电话号码输入格式有误'))
      }  
       callback()
    },

1.校验输入为电话号码（手机号码）

^((13[0-9])|(14[5,7])|(15[^4,\\D])|(17[0,1,3,6-8])|(18[0-9])|(19[8,9])|(166))[0-9]{8}$

2.校验输入为是否为邮箱

/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/

3.校验是否全部为数字且有一范围：

^[1-9]\\d{0,11}$ 或者 ^[1-9]\d{0,11}$

4.校验输入包含数字+字母+特殊符号：

^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}$

5.校验输入包含字母加数字
其实这三者可以随意组合的
有些两边要加引号，有些不加，都试试吧

'^[A-Za-z0-9]{6,6}$'

6.输入0-10的整数，输入1-999的整数

/^([0-9]|10)$/
/^(?!0)\d{1,3}$/

后面还会添加更多常用规则

更多规则点击这里