1. 正则表达式
正则表达式 (regular expression) 是一个形容字符规定的对象。如：只能呈现字母，只能呈现数字，前三个必须是数字等。
前端往往有大量的表单数据校验的工作，采纳正则表达式会使得数据校验的工作量大大加重，如邮箱验证，手机号码，等等。比起用字符串的函数来判断，更简略易用。
正则表达式的组成：一般字符 或者 特殊字符。
定义：
（1）字面量
var reg = /一般字符或者特殊字符/【修饰符】
var reg = /a/;//至多蕴含一个aconsole.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));//7match 办法
- 应用正则表达式模式对字符串执行查找，并将蕴含查找的后果作为数组返回。
- 用法：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]);//987replace 办法
- 返回依据正则表达式进行文字替换后的字符串的复制。
- 用法：stringObj.replace(rgExp,replaceText)
var reg = /laowang/g; var str = "laowang的隔壁也住着laowang"; console.log(str.replace(reg,"dahuang"));//dahuang的隔壁也住着dahuang- ↩