正则得介绍和使用——表单验证
- 2019 年 10 月 3 日
- 筆記
1、正则的概念
（1）js这门语言一开始诞生得目的是什么？
就是为了做表单验证。在JS未出现以前，表单的信息验证需要传输给后台，让后台做数据验证处理之后，再返回给前端页面处理的结果。在带宽有限的情况下，整个验证过程非常复杂，且耗时。
在使用JS做验证的过程中，一个简单的验证规则的实现非常的麻烦。
如：从杂乱的字符串中找数字
var str = "asd68asd687as6da78sd123123zcacas" var linshi=''; var arr=[] for(var i = 0 ; i < str .length ; i ++){ if(str.charAt(i)>=0&&str.charAt(i)<=9){ linshi+=str.charAt(i) }else{ if(linshi!=''){ arr.push(linshi) } } } if(linshi!=''){ arr.push(linshi) } console.log(arr)
如果我们使用正则呢？
var arr = str.match(/d+/g);
是的使用正则和使用传统的js代码都可以实现这个功能，但是是不是太繁琐了。
（2）、什么是正则？
正则表达式（regular expression）是一个描述字符规则的对象。可以用来检查一个字符串是否含有某个字符，将匹配的字符做替换或者从某个字符串中取出某个条件的子串等。
正则表达式：
正则表达式其实就是一种规则，其实把正则称作规则表达式更为恰当。正则的语法基于一种古老的perl语言。
（3）、为什么要使用正则呢？
前端往往有大量的表单数据校验工作，采用正则表达式会使得数据校验的工作量大大减轻。常用效果：邮箱，手机号，身份证号等（使用熟练的情况下）
正则的使用理念：
任何程序都可以不用正则表达式写出来，但根据懒人原则，怎么做不言而喻。
2.正则的创建方式
正则的创建方式：
（1）.构造函数方式
var reg1 = new RegExp("a"); var str = "adassdfsd"; console.log(str.match(reg1)) //输出匹配a的字符
（2）.字面量方式，古老的perl语言风格
var reg2 = /a/; console.log(str2.match(reg2)); //输出匹配a的字符
（3）常用的正则表达式
/* / / 是正则表达式的标识符 " " 是字符串的标识符 [ ] 是数组的标识符 { } 是对象的标识符 正则中的修饰符，写在正则表达式后面／的后面： g表示全局匹配，查找所有 i表示忽略大小写 d 匹配所有的数字 */ var reg = /d/g; console.log(str.match(reg)) //打印字符串中所有的数字 /* + 若干，量词，表示多少个都可以，至少1个，无上限*/ var reg = /d+/g; console.log(str.match(reg)) //打印字符串中所有的数字,连续 /* | 表示或，类似于js中的 || */ var reg = /abc|bbc|cbc|dbc/g console.log(str.match(reg)); //打印字符串中的abc，bbc，cbc，dbc var reg = /[a-c]bc/g /* [ ] 中元符*/ var reg = /[a-z]/ //匹配所有字母 [0-9] == d /* ^ 排除（除了）*/ var reg = /[^0-9]/ //表示除了数字之外所有 /* . 代表所有，不建议使用*/ var reg = /<.+>/g console.log(str.replace(reg,"")) //过滤，表示尖括号里面的东西不要，但是？ // 正则的贪婪定律： var reg = /<[^<>]+>/g console.log(str.replace(reg,"")) //表示尖括号里面的东西不要，真 /* 转义字符： d —— [0-9] 数字 w —— [a-z0-9_] 数字，字母，下划线 s —— 空白字符（空格） D —— [^0-9] 非数字 W —— [^a-z0-9_] 非数字，字母，下划线 S —— 非空白字符 量词：限定符，可以指定正则表达式的一个给定组，必须要出现多少次才能满足匹配 * 匹配前面的子表达式零次或多次 + 匹配前面的子表达式至少一次或多次 ? 匹配前面的子表达是零次或一次 {n} 匹配确定n次 {n,} 至少匹配n次 {n,m} 至少匹配n次，最多匹配m次 注：在限定符后紧跟？，则由贪婪匹配变成非贪婪匹配 */
tip：推荐的一个正则表达式手册
3.字符串.replace(oldstr, newstr)函数 和 字符串.match(正则)函数
字符串的replace函数的功能：将老字符串替换成新字符串
可以利用此函数，将老字符串表示成正则表达式，对字符串进行替换
如：字符串中的abc替换成“哈哈”，如果正则后面没有g，则只替换一个，如果没有i，则大写不会替换
var str = “abc123abc456abbcdABCefaacbcdbcabc"; var reg = /abc/g; console.log(str.replace(reg,"哈哈"));
tip：字符串match函数的功能：提取所有的想要的东西，返回一个数组，包含所有符合条件的字符。
tip：看一些小练习
// qq号验证规则: var reg = /[1-9]d{4,10}/ //固化的规则：0411-6666888 //规则：开头为0或者2的或者三位数字加上-开头为非零的八位数字，结尾是1到4的分机号 var reg = /(0d{2,3}-)?[1-9]d{7}(-d{1,4})?/ //复杂邮箱的规则：英文数字下划线@一串英文或数子.一串英文 var reg = /w+@[a-z0-9]+.[a-z]+/i //想要校验怎么办？在正则转义字符前加上 //删除多余空格 str.replace(/s+/g,''); //删除首尾空格 str.replace(/^s+/,''); str.replace(/s+$/,''); //检查邮政编码 共 6 位数字，第一位不能为 0 /^[1-9]d{5}$/ //ps：规则可以自己定，也可以别人定，我们自己写的练习当然是我们自己定，但是以后定规则一定要跟你产品经理沟通好，不是你想怎么定就怎么定。
4、正则的方法
正则.test(字符串)方法，返回值是true和false
正则.test(字符串)有一个特性，就是只要字符串的一部分符合要求，那么就会返回true
解决方法：
在正则的一开始加上^表示开始
在正则的结尾处加上$表示结束
tip:exec()找到了返回数组，找不到反回null
5、我们常用的检测方式
//（1）.中文检测 //unicode编码中文监测： /^[u2E80-u9FFF]+$/ //（2）.用户名检测 /^[a-z0-9_-]{3,16}$/ //（3）邮箱检测 /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/ // 可以多次出现 (字母数字下划线.-)@可以出现多个(数字字母.-).2到6位字母或. /^[a-zd]+(.[a-zd]+)*@([da-z](-[da-z])?)+(.{1,2}[a-z]+)+$/ // 可以有多个(字母数字)可有多个可无(.多个(字母数字))@可以多个(数字字母可 有1次可无(-数字字母))可以有多个(1或2个.多个字母) //示例：[email protected] //（4）URL检测 /^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w.-]*)*/?$/ // 有1次或0次(http有1次或0次s : //) 可以多个(数字字母.-) . 2到6位(字母.) 可多个或0个 (可以多个或0个 /数字字母下划线.-) 可0或1次/ // 示例 ：http://sh.op-ta.l.baidu.com //（5）HTML标签检测 /^<([a-z]+)([^<]+)*(?:>(.*)</1>|s+/>)$/ // <多个(字母)可多个或0个(除了<的所有字符) /> // <多个(字母)可多个或0个(除了<的所有字符)>多个任意字符 </重复第一部分的多个字母> //（6）自定义的html标签 /<[^<>]+>/g
6、表单及ajax综合验证-案例
规则：
（1）.用户名 用户名仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
（2）.密码的规则 数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
（3）.重复密码 跟第一次输入 密码一致
（4）.手机号的验证 第一位必须为1，后面再加10位数字
（5）.邮箱 数字大小写字母_- 3到12位 @ 数字字母 2到9位 . 字母2到5位
（6）.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
tip：写的很简陋的一个表单验证，最后没有用php、mysql做后台数据的查询，因为本地服务器也看不了。
//css样式 <style> .error{color: red;} .success{color: green;border: 2px solid green;} </style> //html样式 <body> <form action="http://www.jd.com"> <h2>注册</h2> <p>账号:<input type="text" id="user"><span class="error"></span></p> <p>密码:<input type="text" id="pass"><span class="error"></span></p> <p>确认密码:<input type="text" id="validatePass"><span class="error"></span></p> <p>手机号:<input type="text" id="phoneNum"><span class="error"></span></p> <p>邮箱:<input type="text" id="email"> <span class="error"></span></p> <input type="submit" id="btn" value="提交注册信息"> </form> </body> //js样式 <script> // 每次输入框失去焦点的时候验证输入框内容; => 正确 给予正确提示，错误给予提示; // 当点击提交按钮的时候，所有输入项要正确验证才可跳转; 数组 里面所有的项都验证成功; var aValidate = [false,false,false];//验证数组; function $(id){ return document.getElementById(id); } var oBtn = $("btn"); var oUser = $("user"); var oPass = $("pass"); var oValidatePass = $("validatePass"); oUser.onblur = function(){ var sUser = oUser.value; var reg = /^[a-z0-9_-u4e00-u9fa5]{4,20}$/gi //console.log(sUser); if(reg.test(sUser)){ //符合规则; oUser.className = "success"; oUser.nextElementSibling.innerHTML = ""; aValidate[0] = true; }else{ //console.log(oUser.nextElementSibling); oUser.className = "error"; oUser.nextElementSibling.innerHTML = "支持中文、字母、数字、“-”“_”的组合，4-20个字符"; aValidate[0] = false; } } //判定密码难度 oPass.onblur = function(){ var sPass = oPass.value; var reg = /^[^\*u4e00-u9fa5]{6,20}$/ if(reg.test(sPass)){ //验证成功; // 验证密码强度; // 三个判断分别加分 => //1.有数字 加一分; //2.有字母 加一分; //3.有特殊符号加一分; var mark = 0; //判定是否有数字; var hasNum = /d/g if(hasNum.test(sPass)){ mark++; } var hasLetter = /[a-z]/gi if(hasLetter.test(sPass)){ mark++; } var hasSymbol = /[!@#$%^.]/g if(hasSymbol.test(sPass)){ mark++; } switch(mark){ case 1: oPass.style.border = "2px solid #f10"; oPass.nextElementSibling.innerHTML = "密码安全度低,建议使用组合密码!"; break; case 2: oPass.style.border = "2px solid yellow"; oPass.nextElementSibling.innerHTML = "密码中等,建议使用组合密码!"; break; case 3: oPass.style.border = "2px solid green"; oPass.nextElementSibling.innerHTML = "你别把自己密码忘了!"; setTimeout(function(){ oPass.nextElementSibling.innerHTML = ""; }, 1000); } oPass.className = ""; aValidate[1] = true; }else{ oPass.className = "error"; oPass.style.border = "1px solid #000"; oPass.nextElementSibling.innerHTML = "请输入符合规则的密码"; aValidate[1] = false; } } oValidatePass.onblur = function(){ if(oValidatePass.value == oPass.value){ //正确 oValidatePass.style.border = "1px solid #ddd"; oPass.style.border = "1px solid #ddd"; oValidatePass.nextElementSibling.innerHTML="" aValidate[2] = true; }else{ //错误; oValidatePass.style.border = "2px solid red"; oValidatePass.nextElementSibling.innerHTML="密码输入不一致"; oPass.style.border = "2px solid red"; aValidate[2] = false; } } oBtn.onclick = function(event){ // 是否必填选项选中; var isAllValidate = false; //是否全部验证通过; for(var i = 0 ; i < aValidate.length ; i++){ if(aValidate[i] == false){ var evt = event || window.event; if(evt.preventDefault){ evt.preventDefault() }else{ window.event.returnValue = false; } break; } } } </script>
