【VUE+Elemet 】正则验证 + 表单验证 + 注意事项

目录

一、正则验证

1.输入字母/数字/下划线：

2.请输入中英文/数字/下划线：

3.请输入中文/英文： 

 4.规范金额：

5.用户名不能全是数字: 

6.中文：

7.非中文：

8.限制长度：

9.数字： 

 10.正整数及整数：

11.请输入数字(可正负)

12.请输入数字/小数点: 

13.请输入0-9999

14.大写，小写，数字，特殊字符，至少上面的三种,至少八位

15.自定义校验 

16.是否合法IP地址:

17.是否手机号码或者固话

18.是否身份证号码

19.是否邮箱

20.大/小写字母

21.大小写混合

22.多个8位数字格式(yyyyMMdd)并以逗号隔开

23.数字加英文，不包含特殊字符

24前两位是数字后一位是英文

25.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）

26.正则匹配1到100的数字

二、JS单使用正则 

1.小数点后只能有两位数(可为0) 

2.登录验证(包含字符验证和长度验证)：

3.密码正则:

4.身份证号码正则表达式：

5.QQ号码正则:

6.微信号码正则:

7.特殊字符检测正则:

8.域名正则:

9.车牌号码正则:

10.包含中文正则:

11.护照正则:

12.固定电话正则：

13.IP地址正则:

14.邮政编码正则:

15.经纬度正则

16.判断字符串长度区分中英文

17. js输入1到120的整数文

18.js 1-50

三、表单验证 

请注意此数字验证有四个坑：

数字验证另一种写法（正则）：

element清空表单(全局)：

demo

邮箱

扩展功能1

 扩展功能2

禁止输入空格

四、常用正则

1.表单验证常用正则

 2.正则表达式用例

3.正则几个基本概念：

一、正则验证
1.输入字母/数字/下划线：

{ pattern:/^\w+$/, message: '请输入字母/数字/下划线', trigger: 'blur' },

2.请输入中英文/数字/下划线：

{ pattern:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/, message: '请输入中英文/数字/下划线', trigger: 'blur' },

3.请输入中文/英文： 

    {
                  pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
                  message: '请输入中文/英文',
                  trigger: 'blur'
                },

 4.规范金额：

pattern: /(^[\d]|^[1-9][\d]*)($|[\.][\d]{0,2}$)/,

5.用户名不能全是数字: 

{ pattern:/[^\d]/g, message: '用户名不能全是数字', trigger: 'blur' },

6.中文：

{ pattern:/^[\u4e00-\u9fa5]+$/, message: '请输入中文', trigger: 'blur' },

7.非中文：

/^[^\u4e00-\u9fa5]*$/

8.限制长度：

{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }

9.数字： 

/^[0-9]*$/

{ pattern:/^\d+$/, message: '请输入数字', trigger: 'blur' },

 10.正整数及整数：

pattern: /^[1-9]\d*$/

pattern:/^-?[1-9]\d*$/,

11.请输入数字(可正负)

{ pattern:/^(\-|\+)?\d+(\.\d+)?$/, message: '请输入数字(可正负)', trigger: 'blur' },

/^-[0-9]*[1-9][0-9]*$/

12.请输入数字/小数点: 

    {
                  pattern: /^\d+$|^\d*\.\d+$/,
                  message: '请输入数字/小数点',
                  trigger: 'blur'
                },

13.请输入0-9999

    data() {
          var validatew01014_Max = (rule, value, callback) => {
            var reg= /^(\d|[1-9]\d|9999)(\.\d{1,2})?$/
              if(!reg.test(Number(value))) {
              callback(new Error('范围在0-9999'));
            }else {
              callback();
            }
          };
          return {
            form: {
              w01014_Max: "",
            },
            rules: {
              w01014_Max: [{
                  required: true,
                  message: '请输入直饮水电导率最大值',
                  trigger: 'blur'
                },
                { pattern:/^\d+$|^\d*\.\d+$/, message: '请输入数字/小数点', trigger: 'blur' },
                {
                  required: true,
                  validator: validatew01014_Max,
                  trigger: 'blur'
                },
              ],
            },
          };
        },

14.大写，小写，数字，特殊字符，至少上面的三种,至少八位

    {
       pattern: /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/,
       message: '请输入大/小写字母+数字+特殊字符',
       trigger: 'blur'
     },

15.自定义校验 

    {
              validator: function (rule, value, callback) {
                if (value == '测试') {
                  callback(new Error('名字不能是测试!'))
                } else {
                  callback()
                }
              }
            }

16.是否合法IP地址:

pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,

17.是否手机号码或者固话

pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,

18.是否身份证号码

pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,

19.是否邮箱

pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,

20.大/小写字母

    pattern:/^[a-z]+$/,
     
    pattern:/^[A-Z]+$/,

21.大小写混合

pattern:/^[A-Za-z]+$/,

22.多个8位数字格式(yyyyMMdd)并以逗号隔开

pattern:/^\d{8}(\,\d{8})*$/,

23.数字加英文，不包含特殊字符

pattern:/^[a-zA-Z0-9]+$/,

24前两位是数字后一位是英文

pattern:/^\d{2}[a-zA-Z]+$/,

25.密码校验（6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种）

pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,

26.正则匹配1到100的数字

    ^([1-9][0-9]{0,1}|100)$    或者  ^[0-9]\d{0,1}$

27. 1-1000两位小数

    ^(.*[^0-9]|)(1000|[1-9]\d{0,2})([^0-9].*|)$

二、JS单使用正则 
1.小数点后只能有两位数(可为0) 

    var reg= /^(-?\d+)(\.\d{1,2})?$/
    if(reg.test("12"))
    {
    alert("符合要求");
    }

2.登录验证(包含字符验证和长度验证)：

          if (this.username == "") {
              this.dialog = "请输入用户名/手机号";
              return false;
            }
            var reg1= /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/
              if(!reg1.test(this.username)) {
              this.dialog = "用户名/手机号请输入中英文/数字/下划线";
              return false;
            } 
            var reg2= /^.{1,50}$/
              if(!reg2.test(this.username)) {
              this.dialog = "用户名/手机号长度在 1 到 50 个字符";
              return false;
            } 
            if (this.password == "") {
              this.dialog = "请输入密码";
              return false;
            } 
            var reg3= /^[a-zA-Z0-9_]*$/
              if(!reg3.test(this.password)) {
              this.dialog = "密码请输入字母/数字/下划线";
              return false;
            }
             var reg4= /^.{6,24}$/
              if(!reg4.test(this.password)) {
              this.dialog = "密码长度在 6 到 24 个字符";
              return false;
            } 

3.密码正则:

密码正则，以字母开头，长度在6~18之间，只能包含字母、数字和下划线  

let isTrue =^[a-zA-Z]\w{5,17}$;

强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)

var pwd = /^(?=.\d)(?=.[a-z])(?=.[A-Z]).{8,10}$/

强密码正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符

let isTrue = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

4.身份证号码正则表达式：

第一代身份证只有15位数，第二代身份证有18位数，各位按照需求来选择表达式。

    //第二代身份证号码正则
     
    let isTrue = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
     
    //第一代身份证正则表达式(15位)
     
    let isTrue=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

5.QQ号码正则:

let isTrue = /^[1-9][0-9]{4,10}$/;

6.微信号码正则:

    //微信号正则，6至20位，以字母开头，字母，数字，减号，下划线

    let isTrue = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;

7.特殊字符检测正则:

1.个人认为不全，推荐2

   let isTrue= /["'<>%;)(&+]+-!！@#$~/;

2.

    var str= /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\

·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/im; 
                    if (str.test(this.value)) {
                        uni.showToast({
                            title: '昵称不能包含特殊字符',
                            icon: 'none',
                            duration: 1000
                        });
                        return false;
                    }

8.域名正则:

let isTrue=[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?;    

9.车牌号码正则:

let isTrue = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;

10.包含中文正则:

     
    let isTrue = /[\u4E00-\u9FA5]/;
     
    //这个可以用于验证用户的真实姓名。

11.护照正则:

let isTrue=/^(P\d{7}|G\d{7,8}|TH\d{7,8}|S\d{7,8}|A\d{7,8}|L\d{7,8}|\d{9}|D\d+|1[4,5]\d{7})$/;

12.固定电话正则：

let isTrue=(\d3,4" role="presentation" style="position: relative;">\d3,4$\text{d}3,4$|\d{3,4}-|\s)?\d{8};

13.IP地址正则:

let isTrue=\d+\.\d+\.\d+\.\d+;

14.邮政编码正则:

let isTrue=[1-9]{1}(\d+){5};

15.经纬度正则

     
    //经度正则
     
    let isTrue=/^(\-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
     
    //纬度正则
     
    let isTrue=/^(\-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
     

16.判断字符串长度区分中英文

写法一 

    let nameLong = this.nameValue.replace(/[\u0391-\uFFE5]/g, 'aa').length
    if (nameLong > 10) {
      this.$toasts("不超过10个字符")
      return false
    }

写法二

    export default {
        data() {
            let validcodeName=(rule,value,callback)=>{
                //替换双字节汉字，为aa,限制输入框长度；
                if(value.replace(/[^\x00-\xff]/g, "aa").length>=24){
                    callback(new Error('长度在1到12汉字'))
                }else{
                    callback()
                }
     
            };
            return {
                popFormRules: {
                    Name:[{
                        type: 'string',
                        required: true,
                        message: '请输入名称',
                        trigger: 'blur,change'
                    }, {
                        validator:validcodeName,
                        trigger: 'blur'
                    }],
                }
            }
        }
    },

17. js输入1到120的整数文

    eg = /^[0-9]\d?$|^1[01]\d$|^120$/;
    console.log(reg.test(0));  //true

18.js 1-50

/^\S{1,50}$/

三、表单验证 
请注意此数字验证有四个坑：

1、注意写法：v-model.number="form.phone"

2、js给数字验证长度与其他不同，必须使用正则：{ pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }

3、数字的值其实是int型，注意回显的转换，及传参的转换！（如果回显不转换的话，会一直报错！）
数字验证另一种写法（正则）：

1、{ pattern:/^(\-|\+)?\d+(\.\d+)?$/, message: '请输入数字(可正负)', trigger: 'blur' },
element清空表单(全局)：

1、this.$refs.form.resetFields();
demo

   
           
             
             
           
           
             
             
           
           
             
               
             
           
           
             
             
           
           
             
           
           
             
             
           
           
             
               
             
           
           
              取 消
              确 定
           
         

    form: {
              username: "",
              name: "",
              role: "",
              phone: "",
              pass: "",
              emall: "",
              organization: "",
            },
            rules: {
              username: [{
                  required: true,
                  message: '请输入用户名',
                  trigger: 'blur'
                },
                {
                  min: 1,
                  max: 50,
                  message: '长度在 1 到 50 个字符',
                  trigger: 'blur'
                }
              ],
              name: [{
                  required: true,
                  message: '请输入姓名',
                  trigger: 'blur'
                },
                {
                  min: 1,
                  max: 50,
                  message: '长度在 1 到 50 个字符',
                  trigger: 'blur'
                }
              ],
              role: [{
                  required: true,
                  message: '请选择角色名称',
                  trigger: 'change'
                }
              ],
               phone:[
          { required: true, message: '手机号/账号不能为空',trigger: 'blur'},
          { type: 'number', message: '手机号/账号必须为数字',trigger: 'blur'},
          { pattern:/^\d{1,20}$/, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
               pass: [{
                  required: true,
                  message: '请输入密码',
                  trigger: 'blur'
                },
                {
                  min: 6,
                  max: 24,
                  message: '长度在 6 到 24 个字符',
                  trigger: 'blur'
                }
              ],
               emall: [{
                  required: true,
                  message: '请输入邮箱',
                  trigger: 'blur'
                },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
                {
                  min: 6,
                  max: 50,
                  message: '长度在 6 到 50 个字符',
                  trigger: 'blur'
                }
              ],
              organization: [{
                  required: true,
                  message: '请选择所属组织',
                  trigger: 'change'
                }
              ],
            },

    //添加/修改
          onSubmit(form) {
            this.$refs[form].validate((valid) => {
              if (valid) {
                if (this.isAdd) {
              this.addPeopleLink();
            } else {
              this.changePeopleLink();
            }
              } else {
                return false;
              }
            });
          },

邮箱

   
             
   
     
        
     
    var checkEmail = (rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if (!value) {
              return callback(new Error('邮箱不能为空'))
            }
            setTimeout(() => {
              if (mailReg.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的邮箱格式'))
              }
            }, 100)
          }
     
     
    email: [{
                validator: checkEmail,
                trigger: 'blur'
              }],

扩展功能1

    回车事件   @keyup.enter="submit" 

 扩展功能2
禁止输入空格

v-model.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
四、常用正则
1.表单验证常用正则

    1。^\d+$　　//匹配非负整数（正整数 + 0）
    2。^[0-9]*[1-9][0-9]*$　　//匹配正整数
    3。^((-\d+)|(0+))$　　//匹配非正整数（负整数 + 0）
    4。^-[0-9]*[1-9][0-9]*$　　//匹配负整数
    5。^-?\d+$　　　　//匹配整数
    6。^\d+(\.\d+)?$　　//匹配非负浮点数（正浮点数 + 0）
    7。^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$　　//匹配正浮点数
    8。^((-\d+(\.\d+)?)|(0+(\.0+)?))$　　//匹配非正浮点数（负浮点数 + 0）
    9。^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$　　//匹配负浮点数
    10。^(-?\d+)(\.\d+)?$　　//匹配浮点数
    11。^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
    12。^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
    13。^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
    14。^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
    15。^\w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串
    16。^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$　　　　//匹配email地址
    17。^[a-zA-z]+://匹配(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$　　//匹配url
    18。匹配中文字符的正则表达式： [\u4e00-\u9fa5]
    19。匹配双字节字符(包括汉字在内)：[^\x00-\xff]
    20。应用：计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）
    String.prototype.len=function(){return this.replace([^\x00-\xff]/g,"aa").length;}
    21。匹配空行的正则表达式：\n[\s| ]*\r
    22。匹配HTML标记的正则表达式：/<(.*)>.*<\/\1>|<(.*) \/>/
    23。匹配首尾空格的正则表达式：(^\s*)|(\s*$)

    24。匹配中国邮政编码：[1-9]\d{5}(?!\d)     //评注：中国邮政编码为6位数字
    25。匹配身份证：\d{15}|\d{18}                   //评注：中国的身份证为15位或18位
    26。匹配ip地址：\d+\.\d+\.\d+\.\d+             //评注：提取ip地址时有用
    27。匹配特定数字：
    ^[1-9]\d*$　 　 //匹配正整数
    ^-[1-9]\d*$ 　 //匹配负整数
    ^-?[1-9]\d*$　　 //匹配整数
    ^[1-9]\d*|0$　 //匹配非负整数（正整数 + 0）
    ^-[1-9]\d*|0$　　 //匹配非正整数（负整数 + 0）
    ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮点数
    ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配负浮点数
    ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮点数
    ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
    ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮点数（负浮点数 + 0）

    28。匹配特定字符串：
    ^[A-Za-z]+$　     　//匹配由26个英文字母组成的字符串
    ^[A-Z]+$　          　//匹配由26个英文字母的大写组成的字符串
    ^[a-z]+$　　           //匹配由26个英文字母的小写组成的字符串
    ^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
    ^\w+$　　               //匹配由数字、26个英文字母或者下划线组成的字符串 

 2.正则表达式用例

    * 1、^\S+[a-z A-Z]$ 不能为空 不能有空格 只能是英文字母
    * 2、\S{6,} 不能为空 六位以上
    * 3、^\d+$ 不能有空格 不能非数字
    * 4、(.*)(\.jpg|\.bmp)$ 只能是jpg和bmp格式
    * 5、^\d{4}\-\d{1,2}-\d{1,2}$ 只能是2004-10-22格式
    * 6、^0$ 至少选一项
    * 7、^0{2,}$ 至少选两项
    * 8、^[\s|\S]{20,}$ 不能为空 二十字以上
    * 9、^\+?[a-z0-9](([-+.]|[_]+)?[a-z0-9]+)*@([a-z0-9]+(\.|\-))+[a-z]{2,6}$邮件
    * 10、\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*([,;]\s*\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)* 输入多个地址用逗号或空格分隔邮件
    * 11、^()?[0-9]{7,8}$电话号码7位或8位或前面有区号例如（022）87341628
    * 12、^[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+(\,[a-z A-Z 0-9 _]+@[a-z A-Z 0-9 _]+(\.[a-z A-Z 0-9 _]+)+)*$
    * 只能是字母、数字、下划线；必须有@和.同时格式要规范 邮件
    * 13 ^\w+@\w+(\.\w+)+(\,\w+@\w+(\.\w+)+)*$上面表达式也可以写成这样子，更精练。
    14 ^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$ [/size]

3.正则几个基本概念：

    1.贪婪：+,*,?,{m,n}等默认是贪婪匹配，即尽可能多匹配，也叫最大匹配
    如果后面加上?，就转化为非贪婪匹配，需要高版本支持
    2.获取：默认用(x|y)是获取匹配，很多时候只是测试，不一定要求得到所匹配的数据，尤其在嵌套匹配或大数据中就要用非获取匹配(?:x|y)，这样提高了效率，优化了程序。
    3.消耗：默认是消耗匹配，一般在预查中是非消耗匹配。
    举个例子，2003-2-8要变为2003-02-08
    如果用/-(\d)-/第二次匹配将从8开始，从而只替换第一个2，错误
    如果用/-(\d)(?=-)/则第二次匹配从第二个-开始，即不消耗字符
    4.预查：js中分为正向预查和负向预查
    如上面的(?=pattern)是正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。还有(?!pattern)是负向预查，在任何不匹配 pattern 的字符串开始处匹配查找字符串。负向预查有时会用在对[^]的扩充，[^]只是一些字符，而?!可以使整个字符串。
    5.回调：一般用在替换上，即根据不用的匹配内容返回不用的替换值，从而简化了程序，需要高版本支持 
    6.引用：\num 对所获取的第num个匹配的引用。
    例如，'(.)\1\1' 匹配AAA型。'(.)(.)\2\1' 匹配ABBA型。

原出处：https://blog.csdn.net/Hei_lovely_cat/article/details/105405435