学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes
觉得有帮助的同学,可以点心心支持一下哈
一、正则表达式
1.介绍
用于匹配字符串中字符组合的模式
使用场景
验证表单、过滤敏感词、提取特定部分等
总结
2.语法
1.第一种方法
1.1定义正则表达式规则
1.2.1是否有符合规则的字符串(test()方法)
1.2.2查找符合规则的字符串(exec()方法)
总结
3.元字符
元字符是一些具有特殊含义的字符,可以极大提高了灵活性和强大的匹配功能
总结
3.1边界符
表示位置,开头和结尾,必须用什么开头,用什么结尾
如果^和$在一起,表示必须是精确匹配,例如:/^哈$/.test('哈哈') //flase
3.2量词
表示重复次数
+表示重复至少1次
?表示重复0次或1次
*表示重复0次或多次
{m,n}表示重复m到n次
3.3字符符
比如\d表示0~9
3.3.1[]匹配字符集合
包含[ ]里面任意一个,都返回true
[ ]里面加上-连字符,表示范围
[ ]里面加上^取反符号
3.3.2 .匹配除换行符之外的任何单个字符
总结
案例(用户名验证)
// 获取元素
const input = document.querySelector('input')
const span = document.querySelector('span')
// 给input表单绑定失去焦点事件
input.addEventListener('blur', function () {
// 定义正则规则
const regx = /^[a-zA-Z0-9-_]{6,16}$/
let flag = regx.test(this.value)
// 如果符合正则规范,则让后面的span标签添加right类
// 如果不符合正则规范,则让后面的span标签添加wrong类
if (flag) {
span.classList.add('right')
span.classList.remove('error')
span.innerHTML = '输入成功'
} else {
span.classList.add('error')
span.classList.remove('right')
span.innerHTML = '不符合正则规范,请重新输入'
}
3.3.3某些常见模式的简写方式
3.修饰符
i和g
replace替换
案例(过滤敏感词)
const textarea = document.querySelector('textarea')
const button = document.querySelector('button')
const div = document.querySelector('div')
button.addEventListener('click', function () {
let filterStr = textarea.value.replace(/激情|基情/g, '**')
div.innerHTML = filterStr
textarea.value = ''
})
二、综合案例(小兔鲜页面注册)
// 获取元素
const code = document.querySelector('.code')
const username = document.querySelector('input[name=username]')
const userPhone = document.querySelector('input[name=phone]')
const userCode = document.querySelector('input[name=code]')
const userPwd = document.querySelector('input[name=password]')
const confirm = document.querySelector('input[name=confirm]')
// 发送验证码功能
let flag = true
code.addEventListener('click', function () {
if (flag) {
flag = false
let time = 5
code.innerHTML = `0${time}秒后重新获取`
// 用户点击之后,显示05秒后重新获取
let timeId = setInterval(function () {
time--
if (time === 0) {
clearInterval(timeId)
code.innerHTML = '重新获取'
flag = true
return
}
code.innerHTML = `0${time}秒后重新获取`
}, 1000)
}
})
// 用户名验证
// 封装函数
function verifyName(str) {
// 定义正则
const reg = /^[a-zA-Z0-9-_]{6,10}$/
if (reg.test(str)) {
return true
} else {
return false
}
}
username.addEventListener('change', function () {
if (verifyName(this.value)) {
this.nextElementSibling.innerHTML = ''
return true
} else {
this.nextElementSibling.innerHTML = '昵称长度为6到10个字符'
return false
}
})
// 手机号验证
function verifyPhone(str) {
// 定义正则
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}$/
if (reg.test(str)) {
return true
} else {
return false
}
}
userPhone.addEventListener('change', function () {
if (verifyPhone(this.value)) {
this.nextElementSibling.innerHTML = ''
return true
} else {
this.nextElementSibling.innerHTML = '请输入正确的手机号'
return false
}
})
// 验证码验证
function verifyCode(str) {
// 定义正则
const reg = /^\d{6}$/
if (reg.test(str)) {
return true
} else {
return false
}
}
userCode.addEventListener('change', function () {
if (verifyCode(this.value)) {
this.nextElementSibling.innerHTML = ''
return true
} else {
this.nextElementSibling.innerHTML = '请输入正确的验证码'
return false
}
})
// 密码验证
function verifyPwd(str) {
// 定义正则
const reg = /^[a-zA-Z0-9-_]{6,20}$/
if (reg.test(str)) {
return true
} else {
return false
}
}
userPwd.addEventListener('change', function () {
if (verifyPwd(this.value)) {
this.nextElementSibling.innerHTML = ''
return true
} else {
this.nextElementSibling.innerHTML = '设置6至20位字母、数字和符号组合'
return false
}
})
// 再次确认密码
function verifyConfirmPwd(str) {
if (str == userPwd.value) {
return true
} else {
return false
}
}
confirm.addEventListener('change', function () {
if (verifyConfirmPwd(this.value)) {
this.nextElementSibling.innerHTML = ''
return true
} else {
this.nextElementSibling.innerHTML = '两次密码不一致,请重新输入'
return false
}
})
// 我同意模块
const iconQueren = document.querySelector('.icon-queren')
iconQueren.addEventListener('click', function () {
this.classList.toggle('icon-queren2')
})
// 表单提交模块
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
if (!iconQueren.classList.contains('icon-queren2')) {
alert('请勾选同意协议')
e.preventDefault()
}
if (
!(
verifyName(username.value) &&
verifyPhone(userPhone.value) &&
verifyCode(userCode.value) &&
verifyPwd(userPwd.value) &&
verifyConfirmPwd(confirm.value)
)
) {
alert('请检查输入的数据')
e.preventDefault()
}
})
三、阶段案例(小兔鲜登录页面)
// 实现tab栏切换
const tab_nav=document.querySelector(".tab-nav")
const tab_panes=document.querySelectorAll(".tab-pane")
// 使用事件委托
tab_nav.addEventListener("click",function(e){
if(e.target.tagName==="A"){
// 排他思想
document.querySelector(".active").classList.remove("active")
e.target.classList.add("active")
}
for(let i=0;i<tab_panes.length;i++){
tab_panes[i].style.display="none"
}
tab_panes[e.target.dataset.id].style.display="block"
})
// 点击登录页面
const form=document.querySelector("form")
const remember=document.querySelector(".remember")
const username=document.querySelector("[name=username]")
form.addEventListener("submit",function(e){
e.preventDefault()
// 判断是否勾选协议
if(!remember.checked){
return alert("记得勾选条例")
}
// 把用户名记录到本地存储中
localStorage.setItem("xtx-uname",username.value)
location.href="index.html"
})
阶段案例(小兔鲜首页页面)
// 获取元素
const li_1 = document.querySelector(
'.xtx_topnav .xtx_navs li:nth-child(1) a'
)
const li_2 = document.querySelector(
'.xtx_topnav .xtx_navs li:nth-child(2) a'
)
// 渲染函数
function render() {
const uname = localStorage.getItem('xtx-uname')
if (uname) {
li_1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user"> ${uname}</i></a>`
li_2.innerHTML = `<a href="javascript:;">退出登录</a>`
} else {
li_1.innerHTML = `<a href="./login.html">请先登录</a>`
li_2.innerHTML = `<a href="./register.html">免费注册</a>`
}
}
render()
// 退出登录
li_2.addEventListener('click', function () {
localStorage.removeItem('xtx-uname')
render()
})