一、正则表达式
目标：学习正则表达式概念及语法，编写简单的正则表达式实现字符的查找或检测。
1. 介绍
2. 语法
<script>
// 定义正则表达式 reg里面存的是对象
let reg = /前端/
// 2.检测是否匹配 test (重点)
let str = '我们都在学前端'
// console.log(reg.test(str))
// 3. 检索 exec()
console.log(reg.exec(str)) // 返回的是数组
</script>
3. 元字符
3.1 边界符
^和$所包夹的内容必须是精确匹配，也就是说必须是完全相同的内容才能匹配上
3.2 量词
3.3 字符类
这里[a-zA-Z]指的是选择时26个字母不区分大小写
[a-zA-Z0-9]指的是选择时26个字母不区分大小写同时包括数字0到数字9
[a-zA-Z0-9-_]指的是选择时26个字母不区分大小写同时包括数字0到数字9，还包含-和下划线
解读：
腾讯QQ号首位不能是0所以是[1-9]，后面的数字范围是[0-9]，且因为QQ号最短是5位，故给[0-9]设置{4,}，意为后面出现的数字大于等于四位。（注意，{}量词只作用于它前面元素的次数，跟其他没有关系）
案例-用户名验证
<style>
span {
display: inline-block;
width: 250px;
height: 30px;
vertical-align: middle;
line-height: 30px;
padding-left: 15px;
}
.error {
color: red;
background: url(./error1.png) no-repeat left center;
}
.right {
color: green;
background: url(./right.png) no-repeat left center;
}
</style>
</head>
<body>
<input type="text">
<!-- <span class="error">输入内容不合法</span> -->
<span></span>
<script>
let input = document.querySelector('input')
let span = input.nextElementSibling
input.addEventListener('blur',function(){
if(/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){
span.className = 'right'
span.innerHTML = '输入正确'
} else {
span.className = 'error'
span.innerHTML = '只能输入6-16位字符'
}
})
</script>
</body>
案例-输入昵称
只需要在上个用户名验证案例里面修改一下正则表达式即可
input.addEventListener('blur',function(){
if(/^[\u4e00-\u9fa5]{2,8}$/.test(input.value)){
span.className = 'right'
span.innerHTML = '输入正确'
} else {
span.className = 'wrong'
span.innerHTML = '只能输入中文'
}
})
4.修饰符
4.1 案例-过滤敏感字
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<div></div>
<script>
let btn = document.querySelector('button')
let textarea = document.querySelector('textarea')
let div = document.querySelector('div')
btn.addEventListener('click',function(){
// 过滤用户输入的内容
// g用于全局过滤 | 用于搜索多个内容全局过滤的情况
div.innerHTML = textarea.value.replace(/违法|犯法|尸体/g, '**')
})
</script>
</body>
二、正则案例
知识点补充：
立即执行函数的格式：(function () { }( ))
多个立即执行函数放一起会报错，所以他们之间需要用分号（;）来隔开
如 (function () { }( ));
(function () { }( ))
好处在于这样每个函数之间是独立的，不会相互干扰，避免函数中存在同名的元素而报错
知识补充：
- change事件
<body>
<input type="text">
<script>
let input = document.querySelector('input')
// 当表单里面的值发生变化的时候触发，和 blur 不一样
// blur事件是 离开表单就会触发
// input事件是 只要输入就会触发 频率非常高
// change事件是 里面的数据发生变化后，离开表单才会触发
input.addEventListener('change',function(){
console.log(111)
})
</script>
</body>
2.contains()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!-- <link rel="shortcut icon" href="./favicon.ico"> -->
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/register.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<!-- 顶部导航 -->
<ul class="xtx_navs">
<li>
<a href="./login.html">请先登录</a>
</li>
<li>
<a href="./register.html">免费注册</a>
</li>
<li>
<a href="./center-order.html">我的订单</a>
</li>
<li>
<a href="./center.html">会员中心</a>
</li>
<li>
<a href="javascript:;">帮助中心</a>
</li>
<li>
<a href="javascript:;">在线客服</a>
</li>
<li>
<a href="javascript:;">
<i class="mobile sprites"></i>
手机版
</a>
</li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="xtx_header">
<div class="wrapper">
<!-- 网站Logo -->
<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
<!-- 主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="./index.html">首页</a>
</li>
<li>
<a href="./category01.html">生鲜</a>
</li>
<li>
<a href="./category01.html">美食</a>
</li>
<li>
<a href="./category01.html">餐厨</a>
</li>
<li>
<a href="./category01.html">电器</a>
</li>
<li>
<a href="./category01.html">居家</a>
</li>
<li>
<a href="./category01.html">洗护</a>
</li>
<li>
<a href="./category01.html">孕婴</a>
</li>
<li>
<a href="./category01.html">服装</a>
</li>
</ul>
</div>
<!-- 站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="./cart-none.html" class="xtx_search_cart sprites">
<i>2</i>
</a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
</div>
</div>
</div>
</div>
<div class="xtx-wrapper">
<div class="container">
<!-- 卡片 -->
<div class="xtx-card">
<h3>新用户注册</h3>
<form class="xtx-form">
<div data-prop="username" class="xtx-form-item">
<span class="iconfont icon-zhanghao"></span>
<input name="username" type="text" placeholder="设置用户名称">
<span class="msg"></span>
</div>
<div data-prop="phone" class="xtx-form-item">
<span class="iconfont icon-shouji"></span>
<input name="phone" type="text" placeholder="输入手机号码 ">
<span class="msg"></span>
</div>
<div data-prop="code" class="xtx-form-item">
<span class="iconfont icon-zhibiaozhushibiaozhu"></span>
<input name="code" type="text" placeholder="短信验证码">
<span class="msg"></span>
<a class="code" href="javascript:;">发送验证码</a>
</div>
<div data-prop="password" class="xtx-form-item">
<span class="iconfont icon-suo"></span>
<input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
<span class="msg"></span>
</div>
<div data-prop="confirm" class="xtx-form-item">
<span class="iconfont icon-suo"></span>
<input name="confirm" type="password" placeholder="请再次输入上面密码">
<span class="msg"></span>
</div>
<div class="xtx-form-item pl50">
<i class="iconfont icon-queren"></i>
已阅读并同意<i>《用户服务协议》</i>
</div>
<div class="xtx-form-item">
<button class="submit">下一步</button>
<!-- <a class="submit" href="javascript:;">下一步</a> -->
</div>
</form>
</div>
</div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
<div class="wrapper">
<!-- 联系我们 -->
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode">
<img src="./uploads/qrcode.jpg">
</dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- 其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
<script>
(function(){
// 需求1：发送验证码
// 用户点击之后，显示05秒后重新获取
// 时间到了，自动改为 重新获取
let code = document.querySelector('.xtx-form-item .code')
code.addEventListener('click',function(){
// 倒计时读秒操作
this.innerHTML = `05秒后重新获取`
let num = 5
let timer = setInterval(function(){
num--
code.innerHTML = `0${num}秒后重新获取`
if(num === 0) {
code.innerHTML = `重新获取`
// 清除定时器
clearInterval(timer)
}
},1000)
})
// 需求2:用户名验证（注意封装函数verifyxxx)
// 正则 /^[a-zA-Z0-9-_]{6,10}$/
// 如果不符合要求，则出现提示信息并return false
// 否则则返回return true
// 之所以返回布尔值，是为了最后的提交按钮做准备(只有有一个false就不让提交)
// [name = username] 是css的属性选择器
let username = document.querySelector('[name = username]')
// 鼠标离开需要验证，点击下一步也需要验证，我们可以封装一个函数
username.addEventListener('change',verifyUsername)
// 验证用户名的函数
function verifyUsername() {
// span就是username的下一个兄弟
let span = username.nextElementSibling
// 开始验证 正则 1.定义规则 2.检测
let reg = /^[a-zA-Z0-9-_]{6,10}$/
if(!reg.test(username.value)){ // 加感叹号意为非，就是错误
// console.log('wrong')
span.innerHTML = '昵称长度为6到10个字符'
return false
}
// console.log('right')
span.innerHTML = ''
return true
}
// 需求3:手机号验证
// 正则:/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
// 其余同上
let phone = document.querySelector('[name=phone]')
phone.addEventListener('change',verifyPhone)
// 验证手机号的函数
function verifyPhone() {
// span就是username的下一个兄弟
let span = phone.nextElementSibling
// 开始验证 正则 1.定义规则 2.检测
let 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(phone.value)){ // 加感叹号意为非，就是错误
// console.log('wrong')
span.innerHTML = '请输入正确的手机号'
return false
}
// console.log('right')
span.innerHTML = ''
return true
}
// 需求4:验证码验证
// 正则/^\d{6}$/
// 其余同上
let codeInput = document.querySelector('input[name=code]')
codeInput.addEventListener('change',verifyCode)
// 验证验证码的函数
function verifyCode() {
// span就是username的下一个兄弟
let span = codeInput.nextElementSibling
// 开始验证 正则 1.定义规则 2.检测
let reg = /^\d{6}$/
if(!reg.test(codeInput.value)){ // 加感叹号意为非，就是错误
// console.log('wrong')
span.innerHTML = '请输入正确的验证码'
return false
}
// console.log('right')
span.innerHTML = ''
return true
}
// 需求5:密码验证
// 正则/^[a-zA-Z0-9-_]{6,20}$/
// 其余同上
let pass = document.querySelector('input[name=password]')
pass.addEventListener('change',verifyPass)
// 验证验证码的函数
function verifyPass() {
// span就是username的下一个兄弟
let span = pass.nextElementSibling
// 开始验证 正则 1.定义规则 2.检测
let reg = /^[a-zA-Z0-9-_]{6,20}$/
if(!reg.test(pass.value)){ // 加感叹号意为非，就是错误
// console.log('wrong')
span.innerHTML = '请设置6到20位密码'
return false
}
// console.log('right')
span.innerHTML = ''
return true
}
// 需求6:再次密码验证
// 如果本次密码不等于上面输入的密码则返回错误信息
// 其余同上
let confirm = document.querySelector('[name=confirm]')
confirm.addEventListener('change',verifyConfirm)
// 验证验证码的函数
function verifyConfirm() {
// span就是username的下一个兄弟
let span = confirm.nextElementSibling
if(confirm.value !== pass.value){ // 加感叹号意为非，就是错误
// console.log('wrong')
span.innerHTML = '两次密码不一致'
return false
}
// console.log('right')
span.innerHTML = ''
return true
}
// 需求7:我同意模块
// 添加类.icon-queren2则是默认选中样式
let icon = document.querySelector('.icon-queren')
icon.addEventListener('click',function(){
// toggle 切换类
this.classList.toggle('icon-queren2')
})
// 需求8:提交按钮模块
// 使用submit提交事件
// 如果上面的每个模块，返回的是false则阻止提交
// 如果没有勾选同意协议，则提示需要勾选
// 在提交之前先验证
let form = document.querySelector('form') //提交是表单域来提交
// 用到submit事件验证
form.addEventListener('submit',function(e){
// 怎么阻止提交 (怎么阻止默认行为 )
// 如果没有验证成功，不允许提交，阻止提交的行为
// 函数返回值如果为false则不通过 verifyUsername() === false
if(!verifyUsername()) { // if()里面如果是false就不执行了，所以要加上 非
// 括号里为ture才会放行，所以当 它的非 为true时，说明它自己是false
// 阻止提交
e.preventDefault()
}
if(!verifyPhone()) {
e.preventDefault()
}
if(!verifyCode()) {
e.preventDefault()
}
if(!verifyPass()) {
e.preventDefault()
}
if(!verifyConfirm()) {
e.preventDefault()
}
// 勾选模块，必须勾选才能通过
// classList.add() 添加
// classList.remove() 移除
// classList.toggle() 切换
// classList.contains() 看看有没有，如果有则返回true，没有则返回false
if(!icon.classList.contains('icon-queren2')){
e.preventDefault()
alert('请勾选同意协议')
}
})
}());
</script>
</body>
</html>
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/login.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- 登录头部 -->
<div class="xtx-login-header">
<h1 class="logo"></h1>
<a class="home" href="./index.html">进入网站首页</a>
</div>
<!-- 登录内容 -->
<div class="xtx-login-main">
<div class="wrapper">
<form action="">
<div class="box">
<div class="tab-nav">
<a href="javascript:;" class="active">账户登录</a>
<a href="javascript:;">二维码登录</a>
</div>
<div class="tab-pane">
<div class="link">
<a href="javascript:;">手机验证码登录</a>
</div>
<div class="input">
<span class="iconfont icon-zhanghao"></span>
<input required type="text" placeholder="请输入用户名称/手机号码" name="username">
</div>
<div class="input">
<span class="iconfont icon-suo"></span>
<input required type="password" placeholder="请输入密码" name="password">
</div>
<div class="agree">
<label for="my-checkbox">
<input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
<span class="iconfont icon-xuanze"></span>
</label>
我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
</div>
<div class="button clearfix">
<button type="submit" class="dl">登 录</button>
<!-- <a class="dl" href="./center.html">登 录</a> -->
<a class="fl" href="./forget.html">忘记密码？</a>
<a class="fr" href="./register.html">免费注册</a>
</div>
</div>
<div class="tab-pane" style="display: none;">
<img class="code" src="../images/code.png" alt="">
</div>
</div>
</form>
</div>
</div>
<!-- 登录底部 -->
<div class="xtx-login-footer">
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
<script>
// 需求
// 1.登录按钮点击的时候，需要先判断
// 如果没有勾选同意，则提示要勾选
// 如果勾选协议，则记住用户名和密码
// 登录成功则跳转到首页
// required不能为空
// 注意，登录按钮需要先阻止默认行为
let dl = document.querySelector('.dl')
// 复选框
let remember = document.querySelector('.remember')
let username = document.querySelector('[name=username]')
let password = document.querySelector('[name=password]')
dl.addEventListener('click',function(e){
// 阻止提交
e.preventDefault()
if(!remember.checked) {
alert('请勾选协议')
return
}
let obj = {
username: username.value,
password: password.value,
}
// 写进本地存储
localStorage.setItem('pink',JSON.stringify(obj))
// 跳转到新的页面去
location.href = "./index.html"
})
// 2.打开页面时候，如果本地存储有数据，
// 则自动记录显示用户名和密码，并勾选复选框
let obj = JSON.parse(localStorage.getItem('pink'))
if(obj){
username.value = obj.username
password.value = obj.password
// 如果有数据则默认勾选
remember.checked = true
}
</script>
</body>
</html>
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
