BCSP-玄子前端开发之JavaScript+jQuery入门CH13_表单校验
4.13 表单验证
4.13.1 为什么要表单验证
- 保证输入的数据符合要求
- 减轻服务器的压力
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bjc73ejd-1682307480996)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20230424095004319.png)]
4.13.2 常用的表单验证
- 日期格式
- 表单元素是否为空
- 用户名和密码
- E-mail地址
- 身份证号码
4.13.3 表单验证的思路
- 获得表单元素值
- 使用JavaScript的一些方法对数据进行判断
- 当表单提交时,触发事件,对获取的数据进行验证,并对不合法数据进行提示
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:表示可以进行多行匹配
- g :表示可以进行全局匹配
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_表单校验