APIs学习记录-正则表达式，验证表单案例
一. 知识储备
1）正则表达式
目标：完成小兔鲜儿注册页面的表单验证，具备常见的表单验证能力
应用：
- 表单验证（匹配）
- 过滤敏感词（替换）
- 获取字符串中特定的部分（提取）
步骤：
- 定义规则
- 根据规则查找
reg = /web/
reg.test('web前端开发') // true
reg.test('java开发') // false
const arr = reg.exec('webbb') // 返回数组
2）元字符（特殊字符）
1. 边界符
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本 （以谁开始） |
| $ | 表示匹配行尾的文本 （以谁结束） |
<body>
<script>
// 元字符之边界符
// 1. 匹配开头的位置 ^
const reg = /^web/
console.log(reg.test('web前端')) // true
console.log(reg.test('前端web')) // false
console.log(reg.test('前端web学习')) // false
console.log(reg.test('we')) // false
// 2. 匹配结束的位置 $
const reg1 = /web$/
console.log(reg1.test('web前端')) // false
console.log(reg1.test('前端web')) // true
console.log(reg1.test('前端web学习')) // false
console.log(reg1.test('we')) // false
// 3. 精确匹配 ^ $
const reg2 = /^web$/
console.log(reg2.test('web前端')) // false
console.log(reg2.test('前端web')) // false
console.log(reg2.test('前端web学习')) // false
console.log(reg2.test('we')) // false
console.log(reg2.test('web')) // true
console.log(reg2.test('webweb')) // flase
</script>
</body>
2. 量词
| 量词 | 说明（次数） |
|---|---|
| * | >=0 |
| + | >=1 |
| ？ | 0 or 1 |
| {n} | n |
| {n,} | >=n |
| {n,m} | n~m |
<body>
<script>
// 元字符之量词
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log(reg1.test('')) // true
console.log(reg1.test('w')) // true
console.log(reg1.test('ww')) // true
console.log('-----------------------')
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log(reg2.test('')) // false
console.log(reg2.test('w')) // true
console.log(reg2.test('ww')) // true
console.log('-----------------------')
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/
console.log(reg3.test('')) // true
console.log(reg3.test('w')) // true
console.log(reg3.test('ww')) // false
console.log('-----------------------')
// 4. {n} 重复 n 次
const reg4 = /^w{3}$/
console.log(reg4.test('')) // false
console.log(reg4.test('w')) // flase
console.log(reg4.test('ww')) // false
console.log(reg4.test('www')) // true
console.log(reg4.test('wwww')) // false
console.log('-----------------------')
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log(reg5.test('')) // false
console.log(reg5.test('w')) // false
console.log(reg5.test('ww')) // true
console.log(reg5.test('www')) // true
console.log('-----------------------')
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log(reg6.test('w')) // false
console.log(reg6.test('ww')) // true
console.log(reg6.test('www')) // true
console.log(reg6.test('wwww')) // true
console.log(reg6.test('wwwww')) // false
// 7. 注意事项： 逗号两侧千万不要加空格否则会匹配失败
</script>
3. 字符类
| 字符 | 说明 |
|---|---|
| [abc] | 多选一，只要包含任意一个，都返回true |
| [a-z] | 连字符，指定字符范围 |
| [^a-z] | 取反符，除了…以外的字符 |
<body>
<script>
// 元字符之范围 []
// 1. [abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/
console.log(reg1.test('a')) // true
console.log(reg1.test('b')) // true
console.log(reg1.test('c')) // true
console.log(reg1.test('d')) // false
console.log(reg1.test('ab')) // false
// 2. [a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('a')) // true
console.log(reg2.test('p')) // true
console.log(reg2.test('0')) // false
console.log(reg2.test('A')) // false
// 想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B')) // true
console.log(reg3.test('b')) // true
console.log(reg3.test(9)) // true
console.log(reg3.test(',')) // flase
// 用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1')) // false
console.log(reg4.test('abcd12')) // true
console.log(reg4.test('ABcd12')) // true
console.log(reg4.test('ABcd12_')) // true
// 3. [^a-z] 取反符
const reg5 = /^[^a-z]$/
console.log(reg5.test('a')) // false
console.log(reg5.test('A')) // true
console.log(reg5.test(8)) // true
</script>
</body>
预定义
| 字符 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字 |
| \D | 匹配所有0-9以外的数字 |
| \w | 匹配任意字母，数字，下划线相当于[A-Za-z0-9_] |
| \W | 匹配除字母，数字，下划线以外的字符，相当于[^A-Za-z0-9_] |
| \s | 匹配空格（包括换行符，制表符，空格符等） |
| \S | 匹配非空格的字符 |
日期格式：/^\d{4}-\d{1,2}-\d{1,2}/
4. 替换和修饰符
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
<body>
<script>
// 替换和修饰符
const str = '欢迎大家学习前端，相信大家一定能学好前端，都成为前端大神'
// 1. 替换 replace 需求：把前端替换为 web
// 1.1 replace 返回值是替换完毕的字符串
// const strEnd = str.replace(/前端/, 'web') 只能替换一个
// 2. 修饰符 g 全部替换
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
</script>
</body>
二. 案例：小兔鲜儿注册页面表单验证
- 验证码倒计时模块
- 用户名验证模块
- 手机号验证模块
- 验证码验证模块
- 密码验证模块
- 确认密码验证模块
- 勾选同意模块
- “下一步”，验证全部模块
- 验证码倒计时模块
点击按钮开启倒计时，倒计时五秒，倒计时结束后显示为“重新获取”，这里用立即执行函数是因为方便后面用const code
(function () {
// 1. 发送短信验证码模块
const code = document.querySelector('.code')
let flag = true // 通过一个变量来控制
// 1.1 点击事件
code.addEventListener('click', function () {
if (flag) {
// 取反了，不能马上第二次点击
flag = false
let i = 5
// 点击完毕之后立马触发
code.innerHTML = `0${i}秒后重新获取`
// 开启定时器
let timerId = setInterval(function () {
i--
code.innerHTML = `0${i}秒后重新获取`
if (i === 0) {
// 清除定时器
clearInterval(timerId)
// 重新获取
code.innerHTML = `重新获取`
// 到时间了，可以开启 flag了
flag = true
}
}, 1000)
}
})
})();
- 用户名验证模块
// 2. 验证的是用户名
// 2.1 获取用户名表单
const username = document.querySelector('[name=username]')
// 2.2 使用change事件 值发生变化的时候
username.addEventListener('change', verifyName)
// 2.3 封装verifyName函数
function verifyName() {
const span = username.nextElementSibling // 这里的span是用来显示提示信息的
// 2.4 定规则 用户名
const reg = /^[a-zA-Z0-9-_]{6,10}$/
if (!reg.test(username.value)) {
// console.log(11)
span.innerText = '输入不合法,请输入6~10位'
return false
}
// 2.5 合法的 就清空span
span.innerText = ''
return true
}
- 手机号验证模块（复制前面的就行，改改名儿）
// 3. 验证的是手机号
// 2.1 获取手机表单
const phone = document.querySelector('[name=phone]')
// 2.2 使用change事件 值发生变化的时候
phone.addEventListener('change', verifyPhone)
// 2.3 verifyPhone
function verifyPhone() {
// console.log(11)
const span = phone.nextElementSibling
// 2.4 定规则 用户名
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(phone.value)) {
// console.log(11)
span.innerText = '输入不合法,请输入正确的11位手机号码'
return false
}
// 2.5 合法的 就清空span
span.innerText = ''
return true
}
- 验证码验证模块（复制前面的就行，改改名儿）
// 4. 验证的是验证码
// 4.1 获取验证码表单
const codeInput = document.querySelector('[name=code]')
//4.2 使用change事件 值发生变化的时候
codeInput.addEventListener('change', verifyCode)
// 4.3 verifyPhone
function verifyCode() {
// console.log(11)
const span = codeInput.nextElementSibling
// 4.4 定规则 验证码
const reg = /^\d{6}$/
if (!reg.test(codeInput.value)) {
// console.log(11)
span.innerText = '输入不合法,6 位数字'
return false
}
// 4.5 合法的 就清空span
span.innerText = ''
return true
}
- 密码验证模块（复制前面的就行，改改名儿）
// 5. 验证的是密码框
// 5.1 获取密码表单
const password = document.querySelector('[name=password]')
//5.2 使用change事件 值发生变化的时候
password.addEventListener('change', verifyPwd)
// 5.3 verifyPhone
function verifyPwd() {
// console.log(11)
const span = password.nextElementSibling
// 5.4 定规则 密码
const reg = /^[a-zA-Z0-9-_]{6,20}$/
if (!reg.test(password.value)) {
// console.log(11)
span.innerText = '输入不合法,6~20位数字字母符号组成'
return false
}
// 5.5 合法的 就清空span
span.innerText = ''
return true
}
- 确认密码模块（复制，验证变为当前表单的值是否等于密码框的值）
// 5. 验证的是密码框
// 5.1 获取密码表单
const password = document.querySelector('[name=password]')
//5.2 使用change事件 值发生变化的时候
password.addEventListener('change', verifyPwd)
// 5.3 verifyPhone
function verifyPwd() {
// console.log(11)
const span = password.nextElementSibling
// 5.4 定规则 密码
const reg = /^[a-zA-Z0-9-_]{6,20}$/
if (!reg.test(password.value)) {
// console.log(11)
span.innerText = '输入不合法,6~20位数字字母符号组成'
return false
}
// 5.5 合法的 就清空span
span.innerText = ''
return true
}
- 我同意模块
// 7. 我同意
const queren = document.querySelector('.icon-queren')
queren.addEventListener('click', function () {
// 切换类 原来有的就删掉，原来没有就添加
this.classList.toggle('icon-queren2')
})
- “下一步”，验证全部模块
// 8. 提交模块
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
// 判断是否勾选我同意模块 ，如果有 icon-queren2说明就勾选了，否则没勾选
if (!queren.classList.contains('icon-queren2')) {
alert('请勾选同意协议')
// 阻止提交
e.preventDefault()
}
// 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
// console.log(verifyName())
if (!verifyName()) e.preventDefault()
if (!verifyPhone()) e.preventDefault()
if (!verifyCode()) e.preventDefault()
if (!verifyPwd()) e.preventDefault()
if (!verifyConfirm()) e.preventDefault()
})
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
