我们都知道在很多注册的界面中需要我们填写个人信息。这样就需要对个人信息的进行一个判断,判断我们个人的信息是不是符合规范,比如我们的手机号码是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 = '';
}
}
}
效果: