【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项_vue rules 正则

2401_84413180

于 2024-04-27 06:29:28 发布

阅读量720

点赞数 12

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84413180/article/details/138237818

版权

},


#### 13.请输入0-9999

data() {
var validatew01014_Max = (rule, value, callback) => {
var reg= /^(\d|[1-9]\d|9999)(.\d{1,2})? $KaTeX parse error: Expected 'EOF', got '}' at position 142: \dots } }̲; return \dots$ |^\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!@#$%}&]+ $KaTeX parse error: Undefined control sequence: \d at position 6: )(?![\̲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:/¹+$/,

pattern:/²+$/,


#### 21.大小写混合

pattern:/³+$/,


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

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


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

pattern:/⁴+$/,


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

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


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

pattern:/^{(?![\d]+$)(?![a-zA-Z]+$)(?![}\da-zA-Z]+ $KaTeX parse error: Got function '\u' with no arguments as superscript at position 5: )([^\̲u̲4e00-\u9fa5\s])…$ /,


#### 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 =⁵\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 = /⁶\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=/⁷\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;


#### 5.QQ号码正则:

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


#### 6.微信号码正则:


1. `//微信号正则，6至20位，以字母开头，字母，数字，减号，下划线`
2. `let isTrue = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/;`


#### 7.特殊字符检测正则:


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

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

2.



#### 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 = /⁹{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=((\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}$/


#### 19.纯英文字母正则

// 纯英文字母正则
var posPattern = /¹⁰+$/;
//输出 true 例如：Russel
console.log(posPattern.test(“Russel”));


#### 20.长度在 1 到 50 个字符

inputPattern: /¹¹{1,50}$/,
inputErrorMessage: ‘备注长度在 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;
          }
        });
      },

邮箱

<el-form-item label="邮箱：" prop="email">
          <el-input v-model.trim="form.email" style="width:300px;"></el-input>
</el-form-item>

    

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 {


### 基础面试题

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

         }
        });
      },

邮箱

<el-form-item label="邮箱：" prop="email">
          <el-input v-model.trim="form.email" style="width:300px;"></el-input>
</el-form-item>

    

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 {


### 基础面试题

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> 主要内容包括：**HTML，CSS，JavaScript，浏览器，性能优化等等**

![](https://img-blog.csdnimg.cn/img_convert/0d64f7cd87749100b1d0ad0bdc16c9cd.webp?x-oss-process=image/format,png)

a-z ↩︎
A-Z ↩︎
A-Za-z ↩︎
a-zA-Z0-9 ↩︎
a-zA-Z ↩︎
1-9 ↩︎
1-9 ↩︎
1-9 ↩︎
京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z ↩︎
a-zA-Z ↩︎
\S ↩︎

2401_84413180

关注

12
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
【VUE+Elemet 】最全正则验证 + 表单验证 + 注意事项_vue rules 正则

data() {}̲;return …|^\d*.\d+$/, message: ‘请输入数字/小数点’, trigger: ‘blur’ },},],},},pattern: /]+![\̲d̲!@#]+$/,message: ‘请输入大/小写字母+数字+特殊字符’,},if (value == ‘测试’) {callback(new Error(‘名字不能是测试!
复制链接

扫一扫