共计 3719 个字符，预计需要花费 10 分钟才能阅读完成。
1. 正则表达式
正则表达式 (regular expression) 是一个形容字符规定的对象。如：只能呈现字母，只能呈现数字，前三个必须是数字等。
前端往往有大量的 表单 数据校验的工作，采纳正则表达式会使得数据校验的工作量大大加重，如邮箱验证，手机号码，等等。比起用字符串的函数来判断，更简略易用。
正则表达式的组成：一般字符 或者 特殊字符。
定义：
（1）字面量
var reg = / 一般字符或者特殊字符 /【修饰符】
var reg = /a/;// 至多蕴含一个 a
console.log(reg.test('ab'));//true（2）构造方法
var reg = new RegExp(“ 一般字符或者特殊字符 ”,【修饰符】);
规定：
- 一般字符: 看起来是啥就是啥；
-
特殊字符: 具备非凡含意的字符；
- a. 单个字符
-
^：正则开始
-
-
$ : 正则完结
- ^$ 同时存在代表只能
- . : 元字符, 示意任意一个字符
-
反斜杠: 示意转义字符 反斜杠. 示意.
- 转义字符: 对于没有超能力的字符，赋予能力
- 对于有超能力的字符，勾销能力
- +：示意其后面紧挨着的字符至多呈现 1 次 等价{1,}
- 星号：示意其后面呈现的字符至多呈现过 0 次 等价{0,}
- ?: 示意其后面呈现的字符至多呈现过 0 次，至少 1 次 等价{0,1}
- | : 示意或者
-
-
b. 各种括号
-
{m,n}示意括号后面紧挨着的字符至多呈现 m 个，至少呈现 n 个
- 以 b 结尾 至多 3 个 a 至少 5 个 a /^ba{3,5}&/
- {m}示意括号后面紧挨着的字符只能呈现 m 个
- {m,}示意括号后面紧挨着的字符至多呈现 m 个
- [] 示意括号内的任意一个字符
- [a-z]示意任意一个小写字母 [a-zA-Z0-9]
-
-
1示意非括号内的任意一个字符
- ()个别与或连用 示意优先级
- [u4e00-u9fa5] 任意一个中文字符
-
c. 组合字符
- d: 0- 9 之间的任意一个数字 d 只占一个地位
- D: 除了 d
- w: 数字，字母，下划线 0-9 a-z A-Z _
- W: 除了 w
- s: 空格或者空白等
- S: 除了 s
留神：
- 转义字符: 对于没有超能力的字符，赋予能力；对于有超能力的字符，勾销能力；
- []另一种或 外部的内容被去掉超能力；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text"/>
<button type="button"> 测试 </button>
</body>
</html>
<script type="text/javascript">
var oBtn = document.querySelector('button');
var oText = document.querySelector('input');
oBtn.onclick = function(){
var reg= /a/;// 至多蕴含一个 a
reg= /asd/;// 至多蕴含一个 asd
// 只能蕴含一个 a
reg = /^a$/;
// 以 b 结尾 至多 3 个 a 至少 5 个 a
reg = /^ba{3,5}$/;
// 6 个 5
reg = /^5{6}$/;
// 邮编 6 位数字
reg = /^\d{6}$/;
// 定义一个由字母或数字或下划线组成的用户名 范畴在 6,18 之间
reg= /^\w{6,18}$/;
// 定义一个由字母或数字或下划线组成的用户名 结尾不能是数字 范畴在 6,18 之间
reg= /^\D\w{5,17}$/;
// 定义一个明码 至多 6 位
reg= /^.{6,}$/;
// www.baidu.com
reg = /^www.baidu.com$/;// 此处的. 能够是任意字符
// 转义字符 \: 对于没有超能力的字符，赋予能力
// 对于有超能力的字符，勾销能力
reg = /^www\.baidu\.com$/;//\. 示意真正的点
reg = /^3\+5$/;// //3+5 斜杠 + 代表真正的 +
// 以 13 或 15 或 17 结尾的 11 位的手机号
reg = /^1(3|5|7)\d{9}$/;
reg = /^(13|15|17)\d{9}$/;
//[]另一种或 去掉超能力
reg = /^[a1,b3+.]$/;// 中括号里的点没有超能力 a 或 1 或逗号或 b 或 3 或 + 或点
reg = /^[0-9A-Za-z]$/;// 数字或字母 0- 9 代表 0 到 9
reg = /^1[357]\d{9}$/;
// 两个中文
reg = /^[\u4e00-\u9fa5]{2}$/;
// 空格
reg = /^ $/;
//[^]示意非括号内的任意一个字符
reg = /^[^1ab3]$/;// 方括号里的 ^ 代表非
console.log(reg.test(oText.value));
}
</script>
表单验证
- action: 提交的服务器文件
-
method: 提交的形式
- get 默认为 get 效率高 安全性低 五菱宏光
- post 效率低 安全性高 武装押运
<form action="ok.html" method="get">
</form>- onsubmit 作为 submit 按钮的提交事件，返回值为布尔，决定是否提交数据。true 为提交 false 为不提交。
- 焦点验证: onblur 失去焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="ok.html" method="get">
ID:<input type="text"/><span></span><br>
PWD:<input type="text"/><span></span><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
<script type="text/javascript">
var regId = /^\D\w{5,17}/;
var regPwd = /^.{6,}$/;
var oInputs = document.querySelectorAll('input');
var oF = document.querySelector('form');
var flagId = false;
var flagPwd = false;
oInputs[0].onblur = function(){if(regId.test(this.value)){
this.nextElementSibling.innerHTML = 'ID 格局正确';
flagId = true;
}else{
this.nextElementSibling.innerHTML = 'ID 格局谬误';
flagId = false;
}
}
oInputs[1].onblur = function(){if(regPwd.test(this.value)){
this.nextElementSibling.innerHTML = 'PWD 格局正确';
flagPwd = true;
}else{
this.nextElementSibling.innerHTML = 'PWD 格局谬误';
flagPwd = false;
}
}
oF.onsubmit = function(){if(flagId && flagPwd){return true;}else {return false;}
}
</script>正则中的相干办法和属性
办法：
-
test()
- 测验一个字符串是否合乎某一个正则标准，如果合乎返回 true, 否则返回 false
- 用法: reg.test(str)
-
exec()
- 依据正则表达式查找，后果满足, 会返回一个长度为 1 的数组（数组只有一个值）
- reg.exec(str)
- g 全局属性
var reg = /\d/g;
var arr = reg.exec('1a2b3c')
console.log(arr[0]);//1
arr = reg.exec('1a2b3c')
console.log(arr[0]);//2 全局属性 g 正则中相干字符串的办法:
-
search 办法
- 返回与正则表达式查找内容匹配的第一个子字符串的地位
- 用法: str.search(reg)
- i 疏忽字母大小写
var str = "wo shi ge bi de lao wang";
var reg1 =/sh/;
console.log(str.search(reg1));//3
var reg2 = /GE/i;// i 疏忽大小写
console.log(str.search(reg2));//7-
match 办法
- 应用正则表达式模式对字符串执行查找，并将蕴含查找的后果作为数组返回。
- 用法：str.match(rgExp)
var reg = /\d+/g;
var str = "123a4356a987";
console.log(str.match(reg)[0]);//123
console.log(str.match(reg)[1]);//4356
console.log(str.match(reg)[2]);//987-
replace 办法
- 返回依据正则表达式进行文字替换后的字符串的复制。
- 用法：stringObj.replace(rgExp,replaceText)
var reg = /laowang/g;
var str = "laowang 的隔壁也住着 laowang";
console.log(str.replace(reg,"dahuang"));//dahuang 的隔壁也住着 dahuang- ↩
正文完