js正则表达式

最新推荐文章于 2021-05-31 12:07:36 发布

qq_31749287

最新推荐文章于 2021-05-31 12:07:36 发布

阅读量190

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_31749287/article/details/54946472

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.声明和使用

@正则的声明和使用

通过构造函数定义

var 变量名= new RegExp(/表达式/);

通过直接量定义（简单方便，我们一般用这个）

var 变量名= /表达式/;

常用方法，可用于检测传入的字符串是否符合该规则并返回布尔值

exp.test("要检测的字符串")

2.预定义类

@预定义类和转义符

. [^\n\r] 除了换行和回车之外的任意字符

\d [0-9] 数字字符digit

\D [^0-9] 非数字字符

\w [a-zA-Z0-9_] 单词字符(所有的字母数字和_)word

\W [^a-zA-Z0-9_] 非单词字符

\s [\f\r\n\t\v] 不可见字符 space 空格也是

\S [^\f\r\n\t\v] 可见字符

转义符

\f 表示换页 form feed

\t 表示水平制表符 table

\v 表示垂直制表符 vertical table

\n /\n/ 换行符 newline
\r /\r/ 回车符 return

\r,\n,\r\n的区别

在万恶的旧社会，打字机换行（\n newline）之后只会下移一行，需要回到一行的开头（\r return）才能继续打字

老式的操作系统也继承了打字机的这一特性，但用户换行之后一般都是要回到开头的，因此新式的操作系统为了方便将键盘上的Enter键的含义修改为\r\n

3.字符类

@字符类

简单类[abc] 表示该位置可以出现的字符

负向类[^abc] 表示该位置不可以出现的字符

范围类[a-e] 表示该位置可以出现的字符的范围

组合类[a-xA-E0-9] 范围类的组合2. 边界量词括号

4.边界，量词，括号

@边界

^ 会匹配行或者字符串的起始位置

^只有在[]内才表示非在外边表示开始

$ 会匹配行或字符串的结尾位置

^$在一起表示必须是这个（精确匹配）

@量词

"*" 重复零次或更多x>=0

"+" 重复一次或更多次x>=1

"?" 重复零次或一次 x=(0||1)

{n} n次 x=n

{n,} 重复n次或更多 x>=n

{n,m} 重复出现的次数比n多但比m少 n<=x<=m

@括号总结

()表示一组

[]表示一个字符的位置

{}表示次数

5. 常见项目的匹配
常见项目的匹配网上有很多（例如搜索常用正则表达式大全），无需记忆，能看懂即可
匹配国内电话号码：
/^0\d{2,3}-\d{7,8}$/
匹配姓名：
/^[\u4e00-\u9fa5]{2,}$/
匹配腾讯QQ号：
/^[1-9]\d{4,10}$/
匹配手机号：
/^(13[0-9]|14[57]|15[0-9]|18[0-9])\d{8}$/
匹配邮箱：
/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

验证座机

<body>
<div class="container">
<label>座机</label><input type="text" id="inp1"><span></span><br>
</div>
</body>
</html>
<script>

//要做事先找人
var inpTel = document.getElementById("inp1");

//分析电话号码的规律
/*匹配电话号码：
010-12345678
0313-1234567
开头3或4位（首位为0）
后面7或8位*/

//var regEx = /^0\d\d-\d\d\d\d\d\d\d\d$/;
var regEx = /^0\d{2,3}-\d{7,8}$/;

//用户输入完成之后进行判断
inpTel.onblur = function () {
//判断用户输入并做相应操作
if (regEx.test(this.value)) {
alert("输入正确");
} else {
alert("滚");
}
}

</script>

验证姓名

<body>
<div class="container">
<label>姓名</label><input type="text" id="inp1"><span></span><br>
</div>
</body>
</html>
<script>

//要做事先找人
var inpName = document.getElementById("inp1");

//分析姓名的规律
// 汉字至少两个汉字

var regEx = /^[\u4e00-\u9fa5]{2,}$/;

//用户输入完成之后进行判断
inpName.onblur = function () {
//判断用户输入并做相应操作
if (regEx.test(this.value)) {
//alert("输入正确");
this.nextSibling.innerHTML = "输入正确"; //HTML DOM nextSibling 属性, nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中
this.nextSibling.className = "right";
} else {
//alert("滚");
this.nextSibling.innerHTML = "输入错误";
this.nextSibling.className = "wrong";
}
}

</script>

完整版表单验证

<body>
<div class="container">
<label>Q Q</label><input type="text" id="inp1"><span></span><br>
<label>手机</label><input type="text" id="inp2"><span></span><br>
<label>邮箱</label><input type="text" id="inp3"><span></span><br>
<label>座机</label><input type="text" id="inp4"><span></span><br>
<label>姓名</label><input type="text" id="inp5"><span></span><br>
</div>
</body>
</html>
<script>

function $(id) {
return document.getElementById(id);
}

//要做事先找人
var inpQQ = $("inp1");
var inpMobile = $("inp2");
var inpEmail = $("inp3");
var inpTel = $("inp4");
var inpName = $("inp5");

//QQ的规律 5到11位开头不能是0
//开头不能为0的数字
var regQQ = /^[1-9]\d{4,10}$/;

//手机号的规律 11位数字并且有号段 13[0-9] 14[57] 15[0-9] 17[0-9] 18[0-9]
//var regMobile = /^()\d{11}$/;
var regMobile = /^(13[0-9]|14[57]|15[0-9]|17[0-9]|18[0-9])\d{8}$/;

//邮箱的规律有@
//var regEmail = /^\w+@\w+$/;
//var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
//barack.obama@whiter-house.gov.us
var regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

//座机
var regTel = /^0\d{2,3}-\d{7,8}$/;

//分析姓名的规律
// 汉字至少两个汉字
var regName = /^[\u4e00-\u9fa5]{2,}$/;

check(inpName, regName);
check(inpQQ, regQQ);
check(inpMobile, regMobile);
check(inpEmail, regEmail);
check(inpTel, regTel);

//用户输入完成之后进行判断
function check(inp, regEx) {
inp.onblur = function () {
//判断用户输入并做相应操作
if (regEx.test(this.value)) {
//alert("输入正确");
this.nextSibling.innerHTML = "输入正确";
this.nextSibling.className = "right";
} else {
//alert("滚");
this.nextSibling.innerHTML = "输入错误";
this.nextSibling.className = "wrong";
}
}
}
</script>