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

2301_82243626

于 2024-05-09 09:19:32 发布

阅读量590

点赞数 3

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_82243626/article/details/138597604

版权

程序员专栏收录该内容

176 篇文章 0 订阅

订阅专栏

最后

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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) $KaTeX parse error: Undefined control sequence: \d at position 15: 或者 ^[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= /["'<>%;)(&+]+-!！@#$~/;

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=(\(\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 = /^[a-zA-Z]+$/;
//输出 true 例如：Russel
console.log(posPattern.test("Russel"));

20.长度在 1 到 50 个字符

inputPattern: /^[\S]{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

<el-form ref="form" :rules="rules" :model="form" label-width="150px">
        <el-form-item label="用户名：" prop="username">
          <el-input placeholder="请输入用户名" v-model="form.username" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item label="姓名：" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item label="角色名称：" prop="role">
          <el-select v-model="form.role" style="width:300px;">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号/账号：" prop="phone">
          <el-input v-model.number="form.phone" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item v-if="isAdd" label="密码：" prop="pass">
          <el-input v-model="form.pass" style="width:300px;"></el-input>
        </el-form-item>
        <el-form-item label="邮箱：" prop="emall">
          <el-input v-model="form.emall" style="width:300px;">
          </el-input>
        </el-form-item>
        <el-form-item label="请选择组织：" prop="organization">
         <el-select v-model="form.organization" style="width:300px;">
            <el-option v-for="item in organizations" :key="item.orgId" :label="item.orgName" :value="item.orgId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onCancle">取 消</el-button>
          <el-button type="primary" @click="onSubmit('form')">确 定</el-button>
        </el-form-item>
      </el-form>

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 {
            callback(new Error('请输入正确的邮箱格式'))
          }
        }, 100)
      }


email: [{
            validator: checkEmail,
            trigger: 'blur'
          }],

扩展功能1

回车事件 @keyup.enter=“submit”

扩展功能2

禁止输入空格

v-model.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

四、常用正则

1.表单验证常用正则

1。^\d+ $KaTeX parse error: Undefined control sequence: \* at position 32: … 0） 2。^[0-9]\̲*̲[1-9][0-9]\*$ 　　//匹配正整数
3。^((-\d+)|(0+)) $KaTeX parse error: Undefined control sequence: \* at position 33: …0） 4。^-[0-9]\̲*̲[1-9][0-9]\*$ 　　//匹配负整数
5。^-?\d+ $KaTeX parse error: Undefined control sequence: \d at position 18: …　　//匹配整数 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]*)) $KaTeX parse error: Undefined control sequence: \d at position 21: …配正浮点数 8。^((-\̲d̲+(\.\d+)?)|(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]*))) $KaTeX parse error: Undefined control sequence: \d at position 22: …负浮点数 10。^(-?\̲d̲+)(\.\d+)?$ 　　//匹配浮点数
11。¹+ $匹配由26个英文字母组成的字符串 12。^[A-Z]+$ 　　//匹配由26个英文字母的大写组成的字符串
13。²+ $匹配由26个英文字母的小写组成的字符串 14。^[A-Za-z0-9]+$ 　　//匹配由数字和26个英文字母组成的字符串
15。^\w+ $KaTeX parse error: Undefined control sequence: \w at position 38: …组成的字符串 16。^[\̲w̲-]+(\.[\w-]+)\*…$ 　　　　//匹配email地址
17。³+://匹配(\w+(-\w+)*)(.(\w+(-\w+)*))*(?\S*)? $KaTeX parse error: Undefined control sequence: \x at position 71: …字节字符(包括汉字在内)：[^\̲x̲00-\xff] 20。…$ )

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

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

2.正则表达式用例

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

HTML、CSS部分截图

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

A-Za-z ↩︎
a-z ↩︎
a-zA-z ↩︎
1-9 ↩︎
1-9 ↩︎
A-Za-z ↩︎
a-z ↩︎

2301_82243626

关注

3
点赞
踩
10

收藏

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

除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
复制链接

扫一扫