美文网首页
前端常用的验证正则

前端常用的验证正则

作者: QLing09 | 来源:发表于2019-11-07 11:28 被阅读0次

    平时做验证经常会用到验证字段的正则,有些总不能记完,放在本地也不方便查询,搬到简书上有网就能查看。

    新增正则解构赋值和正则,超方便有些场景,以前要写多行,现在只需要简写就OK!

    手机号

    /^0{0,1}1[0-9]{10}$/
    

    座机号

    /^([+]{0,1}\d{3,4}|\d{3,4}-)?\d{7,8}$/
    

    保留两位小数的数字

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

    正负数保留两位小数点

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

    包含0的正整数

    /^(0|([1-9]{1}\d*))$/
    

    6-20个字母、数字、下划线

    /^(\w){6,20}$/
    

    只能输入1-30个以字母开头的字串

    /^[a-zA-Z]{1,30}$/
    

    5-20个以字母开头、可带数字、“_”、“.”的字串

    /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/
    

    校验邮政编码

    /^[a-zA-Z0-9 ]{3,12}$/
    

    中文字符

     /^[\u0391-\uFFE5]+$/
    

    身份证

    /(^\d{15}$)|(^\d{17}([0-9]|X)$)/
    

    验证是否是邮箱

    /^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$/
    

    URL

    /^\b(((https?|ftp):\/\/)?[-a-z0-9]+(\.[-a-z0-9]+)*\.(?:com|edu|gov|int|mil|net|org|biz|info|name|museum|asia|coop|aero|[a-z][a-z]|((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]\d)|\d))\b(\/[-a-z0-9_:\@&?=+,.!\/~%\$]*)?)$/i
    

    必须包含字母+数字+特殊符号

    /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>,.\/]).{8,16}/
    

    正则具名组匹配

    const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;
    
    const matchObj = RE_DATE.exec('1999-12-31');
    const year = matchObj[1]; // 1999
    const month = matchObj[2]; // 12
    const day = matchObj[3]; // 31
    
    const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
    
    const matchObj = RE_DATE.exec('1999-12-31');
    const year = matchObj.groups.year; // 1999
    const month = matchObj.groups.month; // 12
    const day = matchObj.groups.day; // 31
    

    解构赋值和替换

    想替换某个对应的正则的符号怎么操作呢?

    • 将日期格式快速转化
    let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
    '2020-06-29'.replace(re, '$<day>/$<month>/$<year>')
    // '29/06/2020'
    
    • 快速替换圆角括号和半角括号
    let a = '(2018)蜀555执123号'
    const re = /((?<year>\d*))/g
    let b = a.replace(re, '($<year>)')
    

    相关文章

      网友评论

          本文标题:前端常用的验证正则

          本文链接:https://www.haomeiwen.com/subject/opjqmctx.html