BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验

BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验

4.13 表单验证

4.13.1 为什么要表单验证

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lIoqo99L-1682358585475)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20230424095004319.png)]

4.13.2 常用的表单验证

• 日期格式
• 表单元素是否为空
• 用户名和密码
• E-mail地址
• 身份证号码

4.13.3 表单验证的思路

1. 获得表单元素值
2. 使用JavaScript的一些方法对数据进行判断
3. 当表单提交时，触发事件，对获取的数据进行验证，并对不合法数据进行提示

4.13.4 表单选择器

• 根据元素类型选取特定的表单元素

语法	描述
:input	匹配所有input、textarea、select和button 元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单项按钮
:checkbox	匹配所有复选框
:image	匹配所有图像域
:file	匹配所有文件域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:submit	匹配所有提交按钮

• 根据元素的状态选取特定的表单元素

语法	描述
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有被选中元素（复选框、单项按钮、select中的option）
:selected	匹配所有选中的option 元素

4.13.5 校验提示特效

• 用户填写完全部表单并提交时才进行校验，错误提示不及时
• 使用警告框提示错误，用户体验不友好

• 在文本框失去焦点时触发验证
• 在文本框的后面添加页面元素，用于存放错误提示信息
• 使用jQuery的html( )方法，动态设置提示信息

4.14 正则表达式

若要满足严谨的邮箱校验，使用前面所学的方式编码会非常繁琐

正则表达式（Regular Expression）编码简洁、验证严谨

• 是对字符串执行模式匹配的强大工具
• 用户名、密码、电子邮箱、手机/固话、身份证号、日期、邮编 ……

var regemail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if ( regemail.test(email) == false ) {
        mail_msg.html( "*邮箱格式不正确" );
        return false;
}

4.14.1 定义正则表达式

• 普通方式（字面量）

var reg = /表达式/附加参数;

• 构造函数

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

• 示例

var reg = /pink/;	或	var reg = new RegExp( "pink" );
var reg = /pink/g;	或	var reg = new RegExp( "pink", "g" );
var reg = /pink/gi;	或	var reg = new RegExp( "pink", "gi" );

• 附加参数
  • g ：表示可以进行全局匹配
    • 默认为非全局匹配，只匹配第一个符合要求的字符串
  • i：表示不区分大小写匹配
  • m：表示可以进行多行匹配

4.14.2 正则表达式的匹配模式

简单模式，只能表示具体的匹配

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

复合模式，可以使用通配符表达更为抽象的规则模式

var reg = /^\w+$/;
var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

4.14.3 正则表达式的使用方式

• RegExp对象的方法

方法	描述
exec(String)	检索一个字符串是否匹配某个模式。如果字符串中含有匹配的文本，则返回匹配的结果；否则返回null
test(String)	检索一个字符串是否匹配某个模式。如果字符串中含有匹配的文本，则返回true；否则返回false

• 示例

var str = "amy like pink";
var reg = /pink/;
var result1 = reg.test(str);    // true
var result2 = reg.exec(str);  // pink

• String对象的方法

方法	描述
match( RegExp )	找到一个或多个正则表达式的匹配
search( RegExp )	返回字符串中第一个与正则表达式相匹配的子串的起始位置
replace( RegExp/String, replacement)	替换字符串中与正则表达式匹配的子串替换为replacement
split( separator, n )	以separator为边界，将字符串分割为字符串数组，n为限制输出数组的个数

var str = "amy like pink";
var reg = /pink/;
var result1 = str.match(reg);			// pink
var result2 = str.search(reg);   		// 9
var result3 = str.replace(reg, "red");	// amy like red

var str1 = "red,pink,blue,white";
var result4 = str1.split(',', 2);			// [ "red", "pink" ]

4.14.4 正则表达式符号

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

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

• []：定义匹配的字符串，如[a-zA-Z]表示匹配字母a-z和A-Z
• {}：用于匹配长度，如\d{4}表示匹配四个数字
• ()：是为了提取匹配到的字符串，表达式中有几个()就有几个相应的匹配字符串

4.15 使用HTML5的方式验证表单

• HTML5新增属性
• validity属性

4.15.1 HTML5新增属性

属性	描述
placeholder	提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required	规定输入域不能为空
pattern	规定验证输入域的模式（正则表达式）

使用HTML5表单验证属性结合正则表达式，是目前客户端校验中应用频次较高的一种校验方式

4.15.2 validity属性

为表单元素添加required和pattern属性后，可以通过validity属性获取ValidityState对象，以获取当前验证属性的验证状态

var validityState = document.getElementById("user").validity;

ValidityState对象包括 8 个属性，分别针对 8 个方面的验证错误

属性	描述
valueMissing	当表单元素设置required属性后，如果表单的值为空，则无法通过表单验证，返回true；否则，返回false
typeMismatch	当用户输入的内容与表单类型不匹配时，返回true；否则，返回false
patternMismatch	当用户输入的内容与表单元素pattern特性的正则不匹配时，返回true；否则，返回false
tooLong	当用户输入的内容超过了表单元素maxLength特性限定的字符长度，返回true；否则，返回false
rangeUnderflow	当用户输入的值小于min特性的值，返回true；否则，返回false
rangeOverflow	当用户输入的值大于max特性的值，返回true；否则，返回false
stepMismatch	当用户输入的值不符合step特性所推算的规则，返回true；否则，返回false
customError	使用自定义的验证错误提示信息时，当存在自定义错误信息时，返回true；否则，返回false

4.15.3 ValidityState对象属性的应用

• 对用户登录页面的邮箱和密码进行校验
• 使用自定义的错误提示

var password = document.getElementById( "password" );
if ( password.validity.valueMissing == true ) {
        password.setCustomValidity( "密码不能为空" );
} else if ( …… ) { …… }

---

BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验