Web APIs -day6
目标：能够利用正则表达式完成小兔鲜注册页面的表单验证，具备常见的表单验证能力
正则表达式
正则表达式（Regular Expression）是一种字符串匹配的模式（规则）
使用场景：
- 例如验证表单：手机号表单要求用户只能输入11位的数字 (匹配)
- 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等
正则基本使用
-
定义规则
-
使用正则
test()方法 用来查看正则表达式与指定的字符串是否匹配- 如果正则表达式与指定的字符串匹配 ，返回
true，否则false
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<script>
const str = 'web前端开发'
const reg = /web/
console.log(reg.test(str))
console.log(reg.test('java开发'))
</script>
</body>
|
元字符
- 普通字符:
- 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。
- 普通字符只能够匹配字符串中与它们相同的字符。
- 比如，规定用户只能输入英文26个英文字母，普通字符的话 /[abcdefghijklmnopqrstuvwxyz]/
- 元字符(特殊字符）
- 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
- 比如，规定用户只能输入英文26个英文字母，换成元字符写法： /[a-z]/
边界符
正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符
如果 ^ 和 $ 在一起，表示必须是精确匹配
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <body>
<script>
const reg = /^web/
console.log(reg.test('weblwz'))
console.log(reg.test('前端weblwz'))
console.log(reg.test('前端web学习lwz'))
console.log(reg.test('welwz'))
const reg1 = /web$/
console.log(reg1.test('web前端lwz'))
console.log(reg1.test('前端lwzweb'))
console.log(reg1.test('前端web学习lwz'))
console.log(reg1.test('welwz'))
const reg2 = /^web$/
console.log(reg2.test('web前端lwz'))
console.log(reg2.test('前端weblwz'))
console.log(reg2.test('前端web学习lwz'))
console.log(reg2.test('welwz'))
console.log(reg2.test('web'))
console.log(reg2.test('webweblwz'))
</script>
</body>
|
量词
量词用来设定某个模式重复次数
注意： 逗号左右两侧千万不要出现空格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <body>
<script>
const reg1 = /^w*$/
console.log(reg1.test(''))
console.log(reg1.test('w'))
console.log(reg1.test('ww'))
console.log('-----------------------')
const reg2 = /^w+$/
console.log(reg2.test(''))
console.log(reg2.test('w'))
console.log(reg2.test('ww'))
console.log('-----------------------')
const reg3 = /^w?$/
console.log(reg3.test(''))
console.log(reg3.test('w'))
console.log(reg3.test('ww'))
console.log('-----------------------')
const reg4 = /^w{3}$/
console.log(reg4.test(''))
console.log(reg4.test('w'))
console.log(reg4.test('ww'))
console.log(reg4.test('www'))
console.log(reg4.test('wwww'))
console.log('-----------------------')
const reg5 = /^w{2,}$/
console.log(reg5.test(''))
console.log(reg5.test('w'))
console.log(reg5.test('ww'))
console.log(reg5.test('www'))
console.log('-----------------------')
const reg6 = /^w{2,4}$/
console.log(reg6.test('w'))
console.log(reg6.test('ww'))
console.log(reg6.test('www'))
console.log(reg6.test('wwww'))
console.log(reg6.test('wwwww'))
</script>
|
范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <body>
<script>
const reg1 = /^[abc]$/
console.log(reg1.test('a'))
console.log(reg1.test('b'))
console.log(reg1.test('c'))
console.log(reg1.test('d'))
console.log(reg1.test('ab'))
const reg2 = /^[a-z]$/
console.log(reg2.test('a'))
console.log(reg2.test('p'))
console.log(reg2.test('0'))
console.log(reg2.test('A'))
const reg3 = /^[a-zA-Z0-9]$/
console.log(reg3.test('B'))
console.log(reg3.test('b'))
console.log(reg3.test(9))
console.log(reg3.test(','))
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1'))
console.log(reg4.test('abcd12'))
console.log(reg4.test('ABcd12'))
console.log(reg4.test('ABcd12_'))
const reg5 = /^[^a-z]$/
console.log(reg5.test('a'))
console.log(reg5.test('A'))
console.log(reg5.test(8))
</script>
</body>
|
替换和修饰符
replace 替换方法，可以完成字符的替换
1
2
3
4
5
6
7
8
9
| <body>
<script>
const str = 'lwz正在学习前端，立志都成为前端大神'
</script>
</body>
|
修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等
- i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
- g 是单词 global 的缩写，匹配所有满足正则表达式的结果
1
2
3
4
5
6
7
8
9
10
11
12
13
| <body>
<script>
const str = 'lwz正在学习前端，立志都成为前端大神'
const strEnd = str.replace(/前端/g, 'web')
console.log(strEnd)
</script>
</body>
|
change 事件
给input注册 change 事件，值被修改并且失去焦点后触发
判断是否有类
元素.classList.contains() 看看有没有包含某个类，如果有则返回true，么有则返回false
