正则表达式练习题
- 一、用户名、密码和手机号的验证
- 1、案例要求
- 2、案例分析
- 3、HTML和CSS代码
- 4、JS代码
- 二、密码强度
- 1、案例要求
- 2、案例分析
- 3、HTML和CSS代码
- 4、JS代码的实现
- 三、书写正则验证邮箱
- 1、邮箱的验证
- 2、代码的实现
- 四、书写正则验证0~255的数字
一、用户名、密码和手机号的验证
1、案例要求
- 用户名以数字或字母开头, 6~11 位;
- 密码6~12位数字字母下划线;
- 手机号11位数字
2、案例分析
- input框的失焦事件
- input输入的内容
- 判断输入的内容, 是否符合要求，不符合, 警告文本提示
3、HTML和CSS代码
<form action="">
<p>
用户名：<input type="text" class="name">
<span>您输入的内容不符合规则</span>
</p>
<p>
密  码：<input type="text" class="pwd">
<span>您输入的内容不符合规则</span>
</p>
<p>
手机号：<input type="text" class="num">
<span>您输入的内容不符合规则</span>
</p>
<button>提交</button>
</form>
<style>
*{
margin: 0;
padding: 0;
}
form{
width: 550px;
height: 250px;
border: 3px solid pink;
margin: 40px auto;
padding: 20px;
font-size: 18px;
border-radius: 3%;
}
input{
width: 200px;
height: 27px;
margin-bottom: 20px;
}
button{
width: 150px;
height: 40px;
font-size: 16px;
margin-top: 10px;
}
p{
display: flex;
}
span{
color: red;
font-size: 16px;
display: none;
margin-right: 5px;
}
</style>
4、JS代码
4.1 代码的实现
// 获取标签对象
const oIptName = document.querySelector('.name'); //用户名
const oIptPwd = document.querySelector('.pwd'); //密码
const oIptNum = document.querySelector('.num'); //号码
// 给用户名添加失焦事件
oIptName.addEventListener('blur', function(e){
// 拿到用户输入的用户名
let value = e.target.value;
// 定义正则表达式 以数字或字母开头、6~11 位;
let reg = /^[0-9A-Za-z]{6,11}$/;
// 根据正则表达式判断
if(reg.test(value)){
e.target.nextElementSibling.style.display = 'none';
}else{
e.target.nextElementSibling.style.display = 'block';
}
})
oIptPwd.addEventListener('blur', function(e){
// 拿到用户输入的密码
let value = e.target.value;
// 定义正则表达式 6~12位数字字母下划线;
let reg = /^\w{6,12}$/;
// 根据正则表达式判断
if(reg.test(value)){
e.target.nextElementSibling.style.display = 'none';
}else{
e.target.nextElementSibling.style.display = 'block';
}
})
oIptNum.addEventListener('blur', function(e){
// 拿到用户输入的手机号
let value = e.target.value;
// 定义正则表达式 11位数字;
let reg = /^\d{11}$/;
// 根据正则表达式判断
if(reg.test(value)){
e.target.nextElementSibling.style.display = 'none';
}else{
e.target.nextElementSibling.style.display = 'block';
}
})
4.2 代码优化
// 获取标签对象
const oIpt = [...document.querySelectorAll('input')];
// 创建正则表达式 以对象形式
const reg = {
name: /^[0-9A-Za-z]{6,11}$/,
pwd: /^\w{6,12}$/,
num: /^\d{11}$/
}
// 循坏遍历
oIpt.forEach(function(item){
// 给对象添加失焦事件
item.addEventListener('blur', function(){
// 获取用户终正在输入的数值
let value = this.value;
// 获取正则
let fnReg = reg[this.className];
// 根据正则去判断
if (fnReg.test(value)) {
// 字符串符合条件
this.nextElementSibling.style.display = 'none'
} else {
// 字符串不符合条件
this.nextElementSibling.style.display = 'block'
}
})
})
二、密码强度
1、案例要求
密码包含数字-字母-符号(!@#)
- 包含一种~弱;
- 包含两种~中;
- 包含三种~强
2、案例分析
判断密码符合这三种格式的那些
- 拿到密码
- 判断正则符合三个强度的那些
- 根据强度让对应的span高亮
3、HTML和CSS代码
<form>
<label>
密码 : <input type="text">
<p>
<span>弱</span>
<span>中</span>
<span>强</span>
</p>
</label>
</form>
<style>
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
height: 150px;
padding: 20px;
border: 2px solid #000;
border-radius: 15px;
margin: 50px auto;
}
label {
font-size: 20px;
}
label>input {
font-size: 20px;
padding-left: 20px;
margin-bottom: 20px;
}
label>p {
height: 30px;
display: flex;
justify-content: space-between;
margin-top: 20px;
}
label>p>span {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
color: #fff;
}
label>p>span:nth-child(1).active {
background-color: red;
}
label>p>span:nth-child(2).active {
background-color: orange;
}
label>p>span:nth-child(3).active {
background-color: green;
}
</style>
4、JS代码的实现
// 获取标签对象
const oIpt = document.querySelector('input');
const oSpans = [...document.querySelectorAll('span')];
// 给密码框添加输入事件
oIpt.oninput = function () {
// 获取输入框的value
const value = this.value;
// 定义正则表达式 判断密码强度
const l1 = /\d/;
const l2 = /[a-zA-Z]/;
const l3 = /[!@#]/;
//通过正则判断当前密码强度
// 定义变量 用于存储密码强度的等级，默认为0级
let level = 0;
if (l1.test(value)) { level++ };
if (l2.test(value)) { level++ };
if (l3.test(value)) { level++ };
/**
* 根据密码强度决定那些span高亮
*
* level == 3 oSpans[0][1][2] 高亮显示
* level == 2 oSpans[0][1] 高亮显示
* level == 1 oSpans[0] 高亮显示
*/
// 通过循坏判断密码强度的等级
for (let i = 0; i < oSpans.length; i++) {
oSpans[i].className = ''
if (i < level) {
oSpans[i].className = 'active'
}
}
}
三、书写正则验证邮箱
1、邮箱的验证
- @前面只能包含数字字母下划线,
- @前只能出现6~10位, 不能以下划线开头;
- 邮箱类型只接受163与qq; 后缀只接受com与cn
2、代码的实现
//定义正则表达式
const reg = /^[0-9A-Za-z]\w{5,9}@(163|qq)\.(com|cn)$/;
//定义邮箱 进行验证
const str1 = 'Wangyi@163.com';
const str2 = 'Wangyi@qq.com';
const str3 = 'Wangyi@163.cn';
const str4 = 'Wangyi@qq.cn';
console.log(reg.test(str1));
console.log(reg.test(str2));
console.log(reg.test(str3));
console.log(reg.test(str4));
四、书写正则验证0~255的数字
/**
* 0~9 \d |
* 10~99 \d{2} -> ([1-9]\d) |
* 100~199 1\d{2} |
* 200~249 2[0-4]\d |
* 250~255 25[0-5]
*/
const reg = /^(\d|([1-9]\d)|1\d{2}|2[0-4]\d|25[0-5])$/;
console.log(reg.test('0'));
console.log(reg.test('10'));
console.log(reg.test('100'));
console.log(reg.test('200'));
console.log(reg.test('255'));
console.log(reg.test('12345'));
