本章节主要讲解了正则表达式在表单验证中的应用,以及如何利用正则表达式和表单辅助特效来提升用户体验。内容涵盖了正则表达式的构造方式、模式定义、RegExp对象的方法、String对象的方法,以及正则表达式中的常用符号。
1. 正则表达式构造方式:
- 普通方式:`var reg = new RegExp("white");`
- 构造函数:`var reg = new RegExp("white", "g");`
- 直接量表示法:`var reg = /white/;`,`var reg = /white/g;`
2. 表达式的模式:
- 简单模式:如 `/china/`, `/abc8/`
- 复合模式:如 `/^\w+$/`(验证由字母数字组成的字符串),`/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/`(验证电子邮件地址)
3. RegExp对象的方法:
- `exec`:在字符串中查找匹配正则表达式的结果,返回一个数组,包含匹配信息。
- `test`:测试字符串是否符合正则表达式,返回布尔值。
4. String对象的方法:
- `match`:在字符串中查找匹配正则表达式的部分,返回匹配结果。
- `search`:搜索字符串中是否存在匹配正则表达式的内容,返回匹配位置的索引,未找到则返回-1。
- `replace`:用新的子串替换匹配正则表达式的子串。
- `split`:根据正则表达式将字符串分割成数组。
5. RegExp对象的属性:
- `global`:判断正则表达式是否包含全局搜索标志`g`。
- `ignoreCase`:判断正则表达式是否包含不区分大小写标志`i`。
- `multiline`:判断正则表达式是否包含多行模式标志`m`。
6. 正则表达式常用符号:
- `.`:匹配任意字符(除了换行符)。
- `^`:匹配字符串的开始。
- `$`:匹配字符串的结束。
- `\w`:匹配字母数字字符。
- `\d`:匹配数字。
- `\s`:匹配空白字符。
- `*`:匹配前面的子表达式零次或多次。
- `+`:匹配前面的子表达式一次或多次。
- `?`:匹配前面的子表达式零次或一次。
- `{n}`:匹配前面的子表达式恰好n次。
- `{n,}`:匹配前面的子表达式至少n次。
- `{n,m}`:匹配前面的子表达式至少n次但不超过m次。
7. 本章任务:
- 制作一个严谨的电子邮箱验证页面。
- 实现省市级联效果。
8. 本章目标:
- 使用`innerHTML`动态改变`DIV`的内容。
- 使用正则表达式验证用户在表单中输入的内容。
- 利用数组实现级联下拉列表框效果,提供更丰富的交互体验。
通过以上内容的学习,开发者能够掌握正则表达式的使用,有效地进行表单数据验证,提高网页表单的用户体验。同时,也能理解并运用相关JavaScript方法处理字符串,实现更复杂的前端功能。