devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JS（JavaScript） 数据校验 正则表达式

作者：正经夜光杯 | 2024-07-08 10:57:14

赞

踩

JS（JavaScript） 数据校验 正则表达式

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

乐游原上清秋节，咸阳古道音尘绝。
音尘绝，西风残照，汉家陵阙。
——《忆秦娥·箫声咽》

文章目录

JavaScript 数据校验 正则表达式

1. 简介

正则表达式是一门独立的语言，有自己的语法，用来检测指定字符串是否符合特定的规则
正则表达式就是用来定义规则的，全称为Regular Expression
JavaScript中提供了RegExp对象，表示正则表达式

2. 定义方式

创建正则表达式对象的方式有两种

2.1 字面量定义

使用字面量定义

var reg = /pattern/attribute;

  • 1

举例

        var reg = /aaa/i;
        //a是定义的匹配规则，i是忽略大小写
        //通过reg的test函数进行验证
        console.log(reg.test("hahahahahahahab"));

  • 1
  • 2
  • 3
  • 4

2.2 构造函数定义

使用构造函数定义

var reg = new RegExp(pattern,attribute);

  • 1

举例

        //定义正则表达式，注意这里的双斜杠中的内容不能以变量传入，只能直接写入
        var reg2 = new RegExp("aaa","i");
        //a是定义的匹配规则，i是忽略大小写
        //通过reg的test函数进行验证
        console.log(reg2.test("hahahahahahahab"));

  • 1
  • 2
  • 3
  • 4
  • 5

2.3 说明

pattern 表示匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成
attribute 表示匹配特征，取值：i忽略大小写、g全局匹配、m多行匹配

3. 匹配规则

3.1 元字符

元字符：具有特殊含义的字符
相关的元字符和对应的含义如下表

符号描述
\s匹配任何的空白字符
\S任何非空白字符
\d匹配一个数字字符，等价于[0-9]
\D除了数字之外的任何字符
\w匹配一个数字、下划线或字母字符
\W除了数字、下划线或字母字符的其他字符，任何非单字字符，等价于
.匹配除了换行符之外的任意字符

3.2 量词

量词：指定字符出现的次数
相关的元字符和对应的含义如下表

符号描述
{n}匹配前一项n次
{n,}匹配前一项n次，或者多次
{n,m}匹配前一项至少n次，但是不能超过m次
*匹配前一项0次或多次，等价于{0,}
+匹配前一项1次或多次，等价于{1,}
?匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

3.3 特殊符号

特殊符号：具有特殊含义的符号
相关的元字符和对应的含义如下表

符号描述
/…/代表一个模式的开始和节数
^匹配字符串的开始，即表示行的开始
$匹配字符串的结束，即表示行的结束
[ ]表示可匹配的列表
()用于分组
|表示或者
[^ ]在[]中的尖括号表示非

注：[\u4E00-\u9FA5]用来匹配中文字符

4. 基本用法

使用正则表达式对象的test方法进行规则是否符合的校验
语法

var flag = reg.test(字符串);

  • 1

判断字符串是否符合正则表达式对象所制定的模式规则，返回true或false

5. 示例代码

以下为各种规则的实例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据校验-正则表达式</title>

    <script>

        //定义正则表达式，注意这里的双斜杠中的内容不能以变量传入，只能直接写入
        var reg = /aaa/i;
        //或
        var reg2 = new RegExp("aaa","i");
        //a是定义的匹配规则，i是忽略大小写
        //通过reg的test函数进行验证
        console.log(reg.test("hahahahahahahab"));
        console.log(reg2.test("hahahahahahahab"));
        console.log("===================================================");
        
        //匹配空白字符
        var regs = new RegExp("\\s","i");
        // 是否包含空白字符
        console.log("匹配空白字符的结果：",regs.test(" "));
        console.log("===================================================");
        
        //匹配非空白字符
        var reg_not_blank = new RegExp("\\S","i");
        // 是否包含非空白字符
        console.log("匹配非空白字符的结果：",reg_not_blank.test("s"));
        console.log("===================================================");
        
        //匹配数字字符[0-9]
        var reg_digital = new RegExp("\\d","i");
        // 是否包含数字字符[0-9]
        console.log("匹配数字字符[0-9]的结果：",reg_digital.test("0"));
        console.log("===================================================");

        //匹配除数字之外的任何字符
        var reg_out_digital = new RegExp("\\D","i");
        // 是否包含除数字之外的任何字符
        console.log("匹配除数字之外的任何字符的结果：",reg_out_digital.test("="));
        console.log("===================================================");

        //匹配一个数字、下划线或字母字符
        var reg_digital_underline_letter = new RegExp("\\w","i");
        // 是否包含一个数字、下划线或字母字符
        console.log("匹配一个数字、下划线或字母字符的结果：",reg_digital_underline_letter.test("_"));
        console.log("===================================================");

        //匹配一个除数字、下划线或字母的其他字符
        var reg_out_digital_underline_letter = new RegExp("\\W","i");
        // 是否包含一个除数字、下划线或字母的其他字符
        console.log("匹配一个除数字、下划线或字母的其他字符的结果：",reg_out_digital_underline_letter.test("="));
        console.log("===================================================");

        //匹配一个除换行符之外的任意字符
        var reg_out_n = new RegExp(".","i");
        // 是否包含一个除换行符之外的任意字符
        console.log("匹配一个除换行符之外的任意字符的结果：",reg_out_n.test("-"));
        console.log("===================================================");

        console.log("==========================数量符=========================");
        
        //匹配前一项字符，并指定匹配的次数
        var reg_n = new RegExp("a{4}","i");
        // 是否包含a字符4次
        console.log("匹配a字符4次的结果：",reg_n.test("saaaasaaaa"));
        console.log("===================================================");

        //匹配前一项字符，并指定匹配的次数
        var reg_n2 = new RegExp("a{4,}","i");
        // 是否包含a字符4次或多次
        console.log("匹配a字符4次或多次的结果：",reg_n2.test("aaaaaaaa"));
        console.log("===================================================");

        //匹配前一项字符，并指定匹配的次数
        var reg_nm = new RegExp("a{4,8}","i");
        // 是否包含a字符4-8次
        console.log("匹配a字符4-8次的结果：",reg_nm.test("aaaaaaaa"));
        console.log("===================================================");

        //匹配前一项字符，并指定匹配的次数
        var reg_0 = new RegExp("a*","i");
        // 是否包含a字符0次或多次
        console.log("匹配a字符0次或多次的结果：",reg_0.test(""));
        console.log("===================================================");

        //匹配前一项字符，并指定匹配的次数
        var reg_1 = new RegExp("a+","i");
        // 是否包含a字符1次或多次
        console.log("匹配a字符1次或多次的结果：",reg_1.test("aa"));
        console.log("===================================================");

        //匹配前一项字符，并指定匹配的次数
        var reg_01 = new RegExp("a?","i");
        // 是否包含a字符0次或1次
        console.log("匹配a字符0次或1次的结果：",reg_01.test(""));
        console.log("===================================================");

        //匹配中文字符
        var reg_cn = new RegExp("[\u4E00-\u9FA5]","i");
        // 是否包含中文字符
        console.log("匹配中文字符的结果：",reg_cn.test("李白"));
        console.log("===================================================");

        //匹配以什么字符开始的字符
        var reg_start = new RegExp("^d","i");
        // 是否以d开头的字符
        console.log("匹配以d开头的字符的结果：",reg_start.test("di"));
        console.log("===================================================");

        //匹配以什么字符结尾的字符
        var reg_end = new RegExp("ss$","i");
        // 是否以d结尾的字符
        console.log("匹配以d结尾的字符的结果：",reg_end.test("ss"));
        console.log("===================================================");

        //匹配匹配列表里的内容，或的关系，表示里表中的任意一个字符被包含即可
        var reg_mid = new RegExp("[aacc]","i");
        // 是否包含列表中的某个字符
        console.log("匹配列表中的某个字符的结果：",reg_mid.test("addd"));
        console.log("===================================================");

        //匹配分组中的字符串
        var reg_mid = new RegExp("(abdc)","i");
        // 是否包含字符串abdc
        console.log("匹配abdc字符串的结果：",reg_mid.test("abdc"));
        console.log("===================================================");

        //匹配任意分组的字符串
        var reg_mid = new RegExp("(abdc)|(aadd)","i");
        // 是否包含任意分组的字符串
        console.log("匹配任意分组的字符串的结果：",reg_mid.test("aadd"));
        console.log("===================================================");

        //匹配非某些字符的其他字符
        var reg_mid = new RegExp("[^0-9]","i");
        // 是否包含0-9之外的字符
        console.log("匹配0-9之外的字符串的结果：",reg_mid.test(" "));
        console.log("===================================================");

        //匹配规则的开始和结束，这里有点问题，布置到怎么应用
        var reg_mid = new RegExp("/libai/","i");
        // 是否包含libai
        console.log("匹配0-9之外的字符串的结果：",reg_mid.test("libai"));
        console.log("===================================================");

    </script>

</head>
<body>
    
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154

6. 浏览器页面效果

使用浏览器打开页面控制台，查看校验的输出结果
在这里插入图片描述

7. 示例代码下载

正则表达式相关示例代码已上传CSDN
下载地址：JavaScript 数据校验 正则表达式 示例代码

感谢阅读，祝君暴富！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/798518
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号