本文共 6283 字，大约阅读时间需要 20 分钟。

1. JavaScript 表单验证

1.1 表单基本验证

1.1.1 为什么要表单验证

• 减轻服务器的压力
• 保证输入的数据符合要求

1.1.2 表单验证的主要内容

• 日期是否有效或日期格式是否正确
• 表单元素是否为空
• 用户名和密码
• E-mail地址是否正确
• 手机号、身份证号码等是否是数字

1.1.3 表单验证的思路

• 当输入的表单数据不符合要求时，如何编写脚本来进行提示？
  • 获得表单元素值
  • 使用JavaScript的一些方法对数据进行判断
  • 当表单提交时，触发 onsubmit 事件，对获取的数据进行验证

	
   
    	  用户名: 
    
    
	  密码: 
    
    
	  
    	  
    	
   

1.1.4 表单验证案例

• 验证 Email
  • Email 不能为空
  • Email 格式不正确，必须包含@和.

  
   
        邮箱: 
    
    
    
      
   

• 验证文本内容
  • 姓名不能为空，并且姓名中不能有数字
  • 密码不能为空，并且密码包含的字符不能少于6个
  • 两次输入的密码必须一致

  
   
        姓名: 
    
    
    密码: 
    
    
    确认密码: 
    
    
    
      
   

1.2 文本框对象

1.2.1 深入了解文本框对象

• 事件

名称	描述
onblur	失去焦点，当光标离开某个文本框时触发
onfocus	获得焦点，当光标进入某个文本框时触发
onkeypress	某个键盘按键被按下并松开

• 模拟文本框（键盘按下清除文本框内容，键盘回退显示文本框内容）

• 方法

名称	描述
blur()	从文本域中移开焦点
focus()	在文本域中设置焦点，即获得鼠标光标
select()	选取文本域中的内容

• 属性

名称	描述
id	设置或返回文本域的 id
value	设置或返回文本域的 value 属性的值

• 文本框对象按键提交

  
   
        用户名: 
    
    
    密码: 
    
    
    
      
   

1.2.2 文本框验证效果

1.3 列表框

1.3.1 深入了解列表框

• Select对象常用事件、方法和属性
• 事件

名称	描述
onchange	当改变选项时调用的事件

• 方法

名称	描述
add()	向下拉列表中添加一个选项

• 属性

名称	描述
options[]	返回包含下拉列表中的所有选项的一个数组
selectedIndex	设置或返回下拉列表中被选项目的索引号
length	返回下拉列表中的选项的数目

• Option 对象常用属性
  • text 设置或返回某个选项的纯文本值
  • value 设置或返回被送往服务器的值

1.3.2 列表框应用

• 下拉列表添加元素

  
   
    
        
    
    
    
          IPoneX      华为P40Pro      
   

• 省市级联下拉列表

   
   
       
               江苏           河南           东三省              
               南京           苏州           扬州          
   

• 年月日三级联下拉列表

    年    月    日

2. 正则表达式

2.1 正则表达式的作用

• 为什么需要正则表达式
  • 简洁的代码
  • 严谨的验证文本框中的内容

2.2 正则表达式的实际应用

• 用户名
• 密码
• 电子邮箱(^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$)
• 手机号码、固定电话
• 身份证号码
• 邮政编码
• ...

2.3 正则表达式的优势

• 问题
  • 从如下的字符串中，把两位数字取出，并保存到数组中
  • “1，a h87 4-12-mm102/34”

2.3.1 传统方式

var str = '1 a h87 4-12-mm102/34'var str1 = []var str2 = []for (var i = 0; i < str.length; i++) {
     var num = Number(str[i]);  str1.push(num)}for (var j = 0; j < str1.length; j++) {
     if(str1[j] !== NaN && str1[j] > 0 && str1[j+1] !== NaN && str1[j+1] > 0) {
       str2.push(Number(str[j])*10+Number(str[j+1]))  }}console.log(str2);

2.3.2 正则表达式方式

var str = '1 a h87 4-12-mm102/34'var reg = /\d+/givar str1 = str.match(reg)// console.log(str1)for (var i = 0; i < str1.length; i++) {
     if (str1[i] > 9 && str1[i] < 100) {
       console.log(str1[i]);  }}

2.4 正则表达式的概述

• 正则表达式是一个描述字符模式的对象
  • 定义正则表达式
  • 表达式的模式

2.5 正则表达式的对象

2.5.1 创建语法

• 普通方式

var reg = /表达式/附加参数var reg = /white/var reg = /white/g

• 构造函数方式

var reg = new RegExp("表达式","附加参数")var reg = new RegExp("white")var reg = new RegExp("white","g")

2.5.2 表达式模式

• 简单模式

var reg = /china/var reg = /abc8/

• 复合模式

var reg = /^\w+$/var email = '409757371@qq.com''pxcai@163.com.cn'var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/

2.5.3 常用属性

• RegExp 对象的属性

属性	描述
global	RegExp 对象是否具有标志 g，全局
ignoreCase	RegExp 对象是否具有标志 i ，是否区分大小写

2.5.4 常用方法

• RegExp 对象的方法

方法	描述
exec	检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test	检索字符串中指定的值，返回 true 或 false

test 方法var str = 'hello js,css,html,nodejs'var reg = /js/g		// truevar reg = /JS/g		// falsevar reg = /JS/gi	// true(不区分大小写)alert(reg.test(str))// test方法用于判断字符串中是否存在正则表达式规定的模式=======================================================================exec 方法var str = 'hello js,css,html,nodejs'var reg = /js/g  // g表示全局匹配, i表示忽略大小写// alert(reg.test(str))  // test 方法用于判断字符串中是否存在正则表达式规定的模式var result = null// exec 方法用于匹配字符串，并通过相关属性获取匹配的信息while (result = reg.exec(str)) {
     console.log(result[0]);     // 匹配字符  console.log(result.index);  // 匹配的位置}

2.6 正则应用方法

2.6.1 String 对象的方法

方法	描述
match	找到一个或多个正则表达式的匹配
search	检索与正则表达式相匹配的值
replace	替换与正则表达式匹配的字符串，常用于过滤敏感词

var str = 'hello js,css,html,nodejs'var reg = /js/g  // g表示全局匹配，i表示忽略大小写console.log(str.search(reg));  // 6 类似于 indexOf 方法console.log(str.match(reg));   // Array(2) 字符串匹配方法，能获取所有匹配的字符串，并且用数组保存console.log(str.replace(reg,'abc'));  // hello abc,css,html,nodeabc 过滤关键字或敏感字

3 正则表达式语法

3.1 常用匹配和定位符号

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\b	代表字符的边界
\B	非单词边界匹配
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除数字之外的任何字符，等价于 [^0-9]
\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\W	任何非单字字符，等价于[^a-zA-Z0-9_]
.	除了换行符之外的任意字符

var str = 'hello js,css,html'var reg = /\bjs/gi  // \b 靠边是指处于边界状态，不仅限于字符串的开头和结尾var reg = /\s/gi    // \s 表示空白字符var reg = /\d/gi    // \d 表示数字字符var reg = /\w/gi    // \w 表示字母数字下划线var reg = /./gi     // . 表示除了换行符之外的任意一个字符alert(reg.test(str))

3.2 重复限定符号与贪婪法则

• 正则表达式重复字符（量词）

符号	描述
{n}	匹配前一项 n 次
{n,}	匹配前一项 n 次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
?	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0, 1}

var str = "我的qq号码:123456myPhone13888888888,"var reg = /\d{
   6}/gi  // 123456 138888var reg = /\q+/gi	 // qq +表示至少1个var reg = /q?/gi     // ?表示0个或1个console.log(str.match(reg));

• 贪婪法则

var str = "我的qq号码:123456myPhone13888888888,"var reg = /1\w+/gi   // 贪婪法则是按匹配最大范围来执行的var reg = /1\w+?/gi  // 贪婪法则是按匹配最大范围来执行的，?用在其他量词后面表示禁用贪婪法则console.log(str.match(reg));

• 正则替换两端空格练习

var str = '   I love Regexp!   'var reg1 = /^\s*/  // 开头空格var reg2 = /\s*$/  // 结尾空格console.log(str.replace(reg1,'').replace(reg2,''))

3.3 其他匹配法则

• 字符匹配符
  • [a-z][A-Z][0-9][1234][abcd]
  • [^] (取反)
• 转义符
  • \
• 选择匹配符
  • |
• 注意事项
  • 中文的匹配
    • [\u4e00-\u9fa5]
  • 转义字符在Regexp对象的创建时要多转义一次

var str = 'pxcai@163.com'var reg = /\./gi   // \.表示普通的小数点符号，不是正则表达式的匹配符alert(reg.test(str))var str = '   I love Regexp!   'var reg = /^\s*|\s*$/g  // | 表示多个匹配条件都可以使用console.log(str.replace(reg,''))var content = '我abc'var reg1 = /[\u4e00-\u9fa5]/g  // 中文匹配alert(reg1.test(content))var reg1 = new RegExp('\\.','gi') // 多转义一次alert(reg1.test(str))

3.4 子表达式和反向引用

• 子表达式
  • 在正则匹配模式中，使用一对括号包起来的内容
• 反向引用
  • 子表达式匹配的内容会被系统捕获到缓冲区，可以使用”\数字”的方式来引用缓冲区内容

var str = 'abc12hhh876aas888kkk111---==='var reg = /(\d)\1\1/g  // 找出三位相同的数字，\1表示前面的子表达式的内容alert(str.match(reg))

3.5 特殊应用

• 正向预查（？=）
  • 获取在指定条件前匹配成功的字符串
• 反向预查（？！）
  • 获取在指定条件后匹配成功的字符串

var str = '我的HTML成绩是95分,CSS成绩是90分,JS成绩是80分,一课不如一课，唉'var reg = /\d{
   2}(?=分,CSS)/gi  // 前向预查,提供筛选条件,获取在条件前面匹配成功字符串var reg1 = /\d{
   2}(?!分,CSS)/gi // 后向预查,提供筛选条件,获取在条件后面匹配成功字符串alert(str.match(reg))alert(str.match(reg1))

3.6 正则表达式练习

• 获取 HTML 标签的个数

var str = '我们在学习
   
    I study JavaScript 
   
今天你学习了嘛
'// var reg = /<[a-zA-Z]+>/gi              // 1.设置 html 开始标签的匹配模式var reg = /<([a-zA-Z]+)>(.+)<\/\1>/gi     // 2.匹配完整的一个 html 标签和内容// console.log(str.match(reg))var arr = str.match(reg)                  // arr[0] = '
   
    I study JavaScript 
   
'var regDelTag = /<.+?>/gi                 // 3.匹配任意的 html 标签,不包含内容alert(arr[0].replace(regDelTag,''))

4 总结

• 正则表达式在某些方面能够节省代码量，提高效率，功能也很强大，做个学习笔记

转载地址：http://zcqwi.baihongyu.com/