目录
1.正则表达式
1.1 什么是正则表达式
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。
在 JavaScript中，正则表达式也是对象。
正则表达式在 JavaScript中的使用场景：
- Ø 表单验证（匹配）
- Ø 过滤敏感词（替换）
- Ø 字符串中提取我们想要的部分（提取）
1.2 语法
正则同样道理，分为两步：
- 1. 定义规则
- 2. 查找
1. 定义正则表达式语法：
其中 / / 是正则表达式字面量
2.判断是否有符合规则的字符串：
test()
方法 用来查看正则表达式与指定的字符串是否匹配
例如：
3.检索（查找）符合规则的字符串：
exec()
方法 在一个指定字符串中执行一个搜索匹配
比如：
注意事项：
正则表达式检测查找 test方法和exec方法有什么区别？
- Ø test方法 用于判断是否有符合规则的字符串，返回的是 布尔值 找到返回true，否则false
- Ø exec方法用于检索（查找）符合规则的字符串，找到返 回数组，否则为 null
1.3 元字符
目标：能说出什么是元字符以及它的好处
普通字符:
大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
也就是说普通字符只能够匹配字符串中与它们相同的字符。
元字符(特殊字符）
是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
Ø
比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..
Ø
但是换成元字符写法： [a-z]
优势：是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
元字符分类：
- Ø 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
- Ø 量词 （表示重复次数）
- Ø 字符类 （比如 \d 表示 0~9）
1.3.1 边界符
正则表达式中的边界符（位置符）用来
提示字符所处的位置
，主要有两个字符
注意：如果 ^ 和 $ 在一起，表示必须是精确匹配。
1.3.2 量词
量词用来 设定某个模式出现的次数
注意： 逗号左右两侧千万不要出现空格
1.3.3 字符类
(1)
[ ] 匹配字符集合
后面的字符串只要包含 abc 中
任意
一个字符
，都返回 true 。
(2)
[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围
比如：
- Ø [a-z] 表示 a 到 z 26个英文字母都可以
- Ø [a-zA-Z] 表示大小写都可以
- Ø [0-9] 表示 0~9 的数字都可以
(3)
[ ] 里面加上 ^ 取反符号
比如：
- Ø [^a-z] 匹配除了小写字母以外的字符
- Ø 注意要写到中括号里面
(4) [ ]里面加 . 匹配除换行符之外的任何单个字符
用户名验证案例
需求：用户名要求用户英文字母,数字,下划线或者短横线组成，并且用户名长度为 6~16位
分析：
- ①：首先准备好这种正则表达式模式 /^[a-zA-Z0-9-_]{6,16}$/
- ②：当表单失去焦点就开始验证.
- ③：如果符合正则规范, 则让后面的span标签添加 right 类.
- ④：如果不符合正则规范, 则让后面的span标签添加 wrong 类.
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(./images/error1.png) no-repeat left center;
}
.right {
color: green;
background: url(./images/right.png) no-repeat left center;
}
</style>
</head>
<body>
<input type="text">
<span></span>
<script>
const input = document.querySelector('input')
const span = input.nextElementSibling
const reg = /^[a-zA-Z0-9-_]{6,16}$/
input.addEventListener('blur', function () {
if (reg.test(this.value)) {
span.innerHTML = '输入正确'
span.className = 'right'
} else {
span.innerHTML = '请输入6到16个字符的英文数字下划线'
span.className = 'error'
}
})
</script>
</body>
</html>
(5). 预定义，
指的是
某些常见模式的简写方式。
1.4 修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
语法：
- Ø i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- Ø g 是单词 global 的缩写，匹配所有满足正则表达式的结果
注意事项：如果没有加g，一般都是只匹配第一个满足表达式的结果。
替换 replace 替换
语法：
1.5 案例
过滤敏感字
需求：要求用户不能输入敏感字 ，比如，pink老师上课很有**
分析：
①：用户输入内容
②：内容进行正则替换查找，找到敏感词，进行**
③：要全局替换使用修饰符 g
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
const tx = document.querySelector('textarea')
const btn = document.querySelector('button')
const div = document.querySelector('div')
btn.addEventListener('click', function () {
// console.log(tx.value)
div.innerHTML = tx.value.replace(/激情|基情/g, '**')
tx.value = ''
})
</script>
</body>
</html>2.综合案例
2.1 小兔鲜页面注册
效果图：
分析业务模块：
①： 发送验证码模块
- 用户点击之后，显示 05秒后重新获取
- 时间到了，自动改为 重新获取
②： 各个表单验证模块
- 用户名验证（注意封装函数 verifyxxx） , 失去焦点触发这个函数
- 正则 /^[a-zA-Z0-9-_]{6,10}$/
- 如果不符合要求，则出现提示信息 并 return false 中断程序
- 否则 则返回return true
- 之所以返回 布尔值，是为了最后的提交按钮做准备 侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发（类似京东效果）
- 手机号验证
- 正则: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/ ，其余同上
-
验证码验证
-
正则 /^\d{6}$/ ，其余同上
-
-
密码验证
-
正则 /^[a-zA-Z0-9-_]{6,20}$/ ，其余同上
-
-
再次密码验证
-
如果本次密码不等于上面输入的密码则返回错误信息 ，其余同上
-
-
我同意模块
- 添加类 .icon-queren2 则是默认选中样式 可以使用 toggle切换类
③： 勾选已经阅读同意模块
④： 下一步验证全部模块，只要上面有一个input验证不通过就不同意提交
- 使用 submit 提交事件
- 如果没有勾选同意协议，则提示 需要勾选
- classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
- 如果上面input表单 只要有模块，返回的是 false 则 阻止提交
代码：
<script>
/* 1.发送验证码 */
//1.1获取发送验证码
const a = document.querySelector('.code')
//定义一个变量，防止获取验证码时重复点击出现的bug
let flat = true
//1.2注册点击事件
a.addEventListener('click', function () {
if (flat) {
//要先变为false
flat = false
let i = 5
//保证不会延迟一秒
a.innerHTML = `0${i}秒后重新获取`
//开启计时器
let num = setInterval(function () {
i--
a.innerHTML = `0${i}秒后重新获取`
if (i === 0) {
//关闭计时器
clearInterval(num)
//重新获取验证码
a.innerHTML = '重新获取'
//倒计时结束，才允许给重新获取
flat = true
}
}, 1000)
}
})
/* 2.用户名验证 */
//2.1 获取对象
const username = document.querySelector('[name=username]')
//2.2 注册变化事件
username.addEventListener('change', verifyName)
//2.3 封装函数
function verifyName() {
//正则
const reg = /^[a-zA-Z0-9-_]{6,10}$/
const span = username.nextElementSibling
//不合法
if (!reg.test(username.value)) {
//提示用户
span.innerHTML = '输入不合法,请输入6~10位'
return false
}
//合法
span.innerHTML = ''
return true
}
/* 3.手机号码验证 */
//3.1 获取对象
const phone = document.querySelector('[name=phone]')
//3.2 注册变化事件
phone.addEventListener('change', verifyPhone)
//3.3 封装函数
function verifyPhone() {
//正则
const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
const span = phone.nextElementSibling
//不合法
if (!reg.test(phone.value)) {
//提示用户
span.innerHTML = '输入不合法,请输入正确的11位手机号码'
return false
}
//合法
span.innerHTML = ''
return true
}
/* 4.验证码验证 */
//4.1 获取对象
const code = document.querySelector('[name=code]')
//4.2 注册变化事件
code.addEventListener('change', verifyCode)
//4.3 封装函数
function verifyCode() {
//正则
const reg = /^\d{6}$/
const span = code.nextElementSibling
//不合法
if (!reg.test(code.value)) {
//提示用户
span.innerHTML = '请输入6位数字的验证码'
return false
}
//合法
span.innerHTML = ''
return true
}
/* 5.密码验证 */
//5.1 获取对象
const password = document.querySelector('[name=password]')
//5.2 密码验证变化
password.addEventListener('change', verifyPassword)
//5.3 封装函数
function verifyPassword() {
//正则
const reg = /^[a-zA-Z0-9-_]{6,20}$/
const span = password.nextElementSibling
//不合法
if (!reg.test(password.value)) {
//提示用户
span.innerHTML = '请输入6~20位的密码'
return false
}
//合法
span.innerHTML = ''
return true
}
/* 6.密码再次验证 */
//6.1 获取对象
const confirm = document.querySelector('[name=confirm]')
//6.2 注册变化事件
confirm.addEventListener('change', verifyConfirm)
//6.3 封装函数
function verifyConfirm() {
const span = confirm.nextElementSibling
//不合法
if (confirm.value !== password.value) {
//提示用户
span.innerHTML = '如果本次密码不等于上面输入的密码'
return false
}
//合法
span.innerHTML = ''
return true
}
/* 6.我同意模块 */
// 6.1 获取对象
const queren = document.querySelector('.icon-queren')
queren.addEventListener('click', function () {
//切换类 有的类就删除，没有就添加
this.classList.toggle('icon-queren2')
})
/* 7.提交模块 */
// 7.1 获取对象
const form = document.querySelector('form')
// 7.2 点击事件
form.addEventListener('submit', function (e) {
//如果没有同意则给予提示信息
if (!queren.classList.contains('icon-queren2')) {
alert('请先同意协议')
//取消自动提交
e.preventDefault()
}
// 如果这样写，直接提交会显示信息不全
// // 依次判断表单是否合法,不合法就阻止页面提交表单信息
// if (!verifyName() || !verifyPhone() || !verifyCode() || !verifyPassword() || !verifyConfirm()) {
// // 阻止页面提交s
// e.preventDefault()
// }
// 这样写，可以看到全部提示信息
if (!verifyName()) e.preventDefault()
if (!verifyPhone()) e.preventDefault()
if (!verifyCode()) e.preventDefault()
if (!verifyPassword()) e.preventDefault()
if (!verifyConfirm()) e.preventDefault()
})
</script>2.2 小兔鲜登录页面
需求①： tab切换
需求②： 点击登录可以跳转页面
- Ø 先阻止默认行为
- Ø 如果没有勾选同意，则提示要勾选
- Ø required 属性不能为空
- Ø 假设登录成功
- 把用户名记录到本地存储中
- 同时跳转到首页 location.href
效果图：
代码：
<script>
/* 1.点击下划线显示和切换显示 */
// 获取对象
const tab_nav = document.querySelector('.tab-nav')
const pane = document.querySelectorAll('.tab-pane')
// 注册点击事件
tab_nav.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// console.log(11);
// 排他思想
document.querySelector('.tab-nav .active').classList.remove('active')
e.target.classList.add('active')
//遍历pane(切换图片)
for (let i = 0; i < pane.length; i++) {
// 都先取消选择
pane[i].style.display = 'none'
}
//再根据当前选择的对象显示信息
pane[e.target.dataset.id].style = 'block'
}
})
/* 2.提交事件 */
// 获取对象
const form = document.querySelector('form')
const agree = document.querySelector('[name=agree]')
const username = document.querySelector('[name=username]')
// 注册点击事件
form.addEventListener('submit', function (e) {
// 阻止页面自动提交
e.preventDefault()
// 只有同意协议，才允许跳转页面
if (!agree.checked) {
return alert('请先同意协议')
}
// 添加本地存储
localStorage.setItem('username', username.value)
//页面跳转
location.href = './index.html'
})
</script>2.3 小兔鲜首页页面
需求：
- 1. 从登录页面跳转过来之后，自动显示用户名
- 2. 如果点击退出，则不显示用户名
步骤：
最好写个
渲染函数
，因为一会的退出还需要用到
①：如果本地存储有记录的用户名， 读取本地存储数据
需要把用户名写到 第一个li里面
格式： <a href="javascript:;"><i class="iconfont icon-user"> pink老师</i></a>
因为登录了，所以第二个 里面的文字变为，退出登录
格式： <a href="javascript:;">退出登录</a>
②：如果本地存储没有数据，则复原为默认的结构
③： 点击 退出登录
删除本地存储对应的用户名数据
重新调用渲染函数即可
效果图：
代码：
<script>
/* 1.显示用户名 */
// 获取对象
const li1 = document.querySelector('.xtx_navs li:first-child')
const li2 = li1.nextElementSibling
//渲染函数
function render() {
const username = localStorage.getItem('username')
//获取本地存储的用户名
if (username) {
li1.innerHTML = `
<a href="javascript:;"><i class="iconfont icon-user">${username} </i></a>`
li2.innerHTML = `<a href="javascript:;">退出登录</a>`
} else {
li1.innerHTML = '<a href="./login.html">请先登录</a>'
li2.innerHTML = '<a href="./register.html">免费注册</a>'
}
}
//调用函数，渲染页面
render()
/* 2.点击退出登录 */
//2.1删除本地存储对应的用户名数据
li2.addEventListener('click', function () {
localStorage.removeItem('username')
// console.log(11)
//2.2重新调用渲染函数即可
render()
})
</script>
扫一扫
957
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
