我们都知道在很多注册的界面中需要我们填写个人信息。这样就需要对个人信息的进行一个判断，判断我们个人的信息是不是符合规范，比如我们的手机号码是11位，并且是以13、15等开头，如果填写其他的就会出现一个标签告诉我们填写错误需要重新填写，前端开发中这个部分是怎么实现的呢？下面我们就来介绍一下这个部分在H5是如何实现的。
首先先来介绍一下正则表达式
正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
概念：
正则表达式是对字符串操作的一种逻辑公式。用事先定义好的一些特定字符组成一个“规则字符串”，再用“规则字符串”对字符进行过滤。
使用正则的目的：
（1）给定一个正则和另一个字符串，我们可以达到以下目的：
（2）给定的字符串是否符合正则表达式的过滤逻辑（匹配）；
（3）可以通过正则表达式，从字符串中获取我们想要的特定部分。
正则表达式的三个功能：
（1）快速匹配指定字符串
（2）替换遵照正则表达式规则的字符串
（3）在目标字符串中筛选指定的子字符串
正则表达式语法：
正则表达式就是由普通字符（例如：a~z）和元字符（特殊字符）组成的文字模式，该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符串模式与所搜索的字符串进行匹配。
构造正则表达式对象时使用的构造函数有俩个参数
1、待匹配的字符串模板
2、是匹配的模式，共三种模式，这三种模式可以组合使用
i：不区分大小写(insensitive)
g:全局查找，整个目标字符串范围内
m:多行查找
正则表达式的简写形式——字面量形式
双斜杠中包含的就是要被匹配的文字
双斜杠后边就是模式组合
例1：
介绍两个常用的属性：
test:正则表达式对象提供的test方法用于检测参数字符串是否有符合表达式模板的文字，如果有则返回true，没有则返回false。
例2：如果要匹配的目标字符串是否以love开头需要通过元字符^(脱字符)来匹配^用来匹配开头是否包含正则表达式模板
例3：匹配结尾需要通过元字符$来匹配
例4：\s是空格符，属于转义字符类似\n（换行符）
例5：匹配的目标要能够构成单词可以使用\W
例6：如果要匹配数，则需要使用到转义字符\d（d:digital 即数字的意思）
例7：元字符中的 ‘或者’|
例8：重复类{ }
match：使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。
例9：元字符+的意义为匹配目标至少连续出现一次；？的意义为匹配前面元字符0次或1次
例10：字符类[ ]
例11：连字符-
例12：[^ ]除外的意思
例13：匹配字母
例14：匹配字符串中的汉字，u4e00-u9fa5是汉字在编码表的范围，这个范围值得就是汉字。
有了这些基础我们开始将这些应用于实际问题中
1、验证中文姓名是否合法
var re = /^[\u4e00-\u9fa5]{2,4}$/;
/*验证字符串从头到尾是否全部由中文组成最少2个字，最多4个字*/
console.log(re.test(name));
2、手机号码的验证
手机号码必须是11位，第一位是1，第二位【3，4，5，7，8】之间的任意一位
其余九位纯数字组成
re = /^1[34578]\d{9}$/g;
console.log(re.test(phone));
3、邮箱验证
邮箱必须以字母数字或者下滑线开头，并且可以出现一次或者多次，
加上@符，@符之后以多位字母或者数字组成，匹配点符号，点符号
后面可以跟不超过三位的字母
re = /^[a-zA-Z0-9_]+@[a-zA-Z0-9]+(\.[a-z]{1,3})$/g;
console.log(re.test(mail));
4、QQ号码验证
re = /^[1-9]\d{4,10}$/g;
console.log(re.test(qq));
5、验证邮政编码
re = /\d{6}/g;
console.log(re.test(postcode));
6、验证网址格式
re = /^http:\/\/|https:\/\/|ftp:\/\/[a-z0-9]+.[a-z0-9]+(\.[a-z]{2,3}){0,}$/g;
console.log(re.test(URLString));
7、身份证号
regExp = /^\d{17}(\d|x|X)$/g;
console.log(regExp.test(str));
8、对于敏感词的屏蔽
style：
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
margin: 0 auto;
margin-top: 100px;
text-align: center;
}
#title {
vertical-align: top;
}
#input_area {
width: 600px;
height: 200px;
margin: 0 auto;
display: inline-block;
}
#display_area {
width: 600px;
height: 200px;
border: 1px solid skyblue;
margin: 0 auto;
display: inline-block;
}
#submit_btn {
width: 100px;
height: 30px;
font-size: 2em;
margin: 0 auto;
display: block;
}
JS：
var textArea = document.getElementById('input_area');
var displayArea = document.getElementById('display_area');
var submitBtn = document.getElementById('submit_btn');
//定义正则表达式限定要被过滤的词汇
var regExp = /擦|艹|草拟马|nmb|妈蛋|你麻痹/g;
submitBtn.onclick = function(){
displayArea.innerHTML = textArea.value.replace(regExp, function($0){
var replacement = '';
for(var i = 0; i < $0.length; i++){
replacement += '*';
}
return replacement;
});
}
9、验证码的强度
style：
*{
padding: 0;
margin: 0;
list-style: none;
}
ul{
margin-left: 40px;
margin-top: 20px;
}
ul li{
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid gray;
text-align: center;
}
JS：
var weak = document.getElementById('weak');
var fairly = document.getElementById('fairly');
var forte = document.getElementById('forte');
/*
自己定义密码的规则：
1、密码长度6-16位有效字符；
2、如果密码是纯数字，则密码强度弱；
3、如果密码中包含数字和字母的组合，则密码强度中等；
4、密码中包含数字、大小写字母、下划线的组合，密码强度强。
*/
document.onkeyup = function(){
var passcode = document.getElementsByTagName('input')[0].value;
// var jiancha = passcode.split('');
if(passcode.length >= 5){
var low = /^[0-9]{6,16}$/g;
var middle = /^[a-zA-Z0-9]{6,16}$/g;
var high = /^[a-zA-Z0-9_]{6,16}$/g;
if (low.test(passcode)){
console.log('密码安全等级弱');
weak.style.background = 'red';
}else if (middle.test(passcode)) {
console.log('密码强度等级中等');
weak.style.background = 'yellow';
fairly.style.background = 'yellow';
weak.innerHTML = ' ';
}else if (high.test(passcode)) {
console.log('密码强度等级高');
weak.style.background = 'green';
fairly.style.background = 'green';
forte.style.background = 'green';
weak.innerHTML = ' ';
fairly.innerHTML = ' ';
}else{
console.log('密码无效');
weak.style.background = 'gray';
fairly.style.background = 'gray';
forte.style.background = 'gray';
weak.innerHTML = '';
fairly.innerHTML = '';
forte.innerHTML = '';
}
}
}
效果：
