表单验证

表单验证

表单验证的优势

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

表单选择器

语 法	描 述
:input	匹配所有 input、textarea、select 和 button元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素，或者 type=hidden 的表单元素
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有被选中元素(checkbox、radio、select 中的 option)
:selected	匹配所有选中的 option 元素

表单验证事件和方法

类 别	名称	描述
事件	onblur	失去焦点，当光标离开某个文本框时触发
	onfocus	获得焦点，当光标进入某个文本框时触发
方法	blur()	从文本域中移开焦点
	focus()	在文本域中设置焦点，即获得鼠标光标
	select()	选取文本域中的内容，突出显示输入区域的内容

正则表达式

正则表达式优势

• 简洁的代码
• 严谨的验证文本框中的内容

定义正则表达式

普通方式

语法 1
	var regExp=/表达式/附加参数（只能表示具体的匹配）
	eg:
		var regExp=/white/;
		var regExp=/white/g;

构造函数

语法 2
	var regExp=new RegExp("表达式","附加参数");
	eg:
		var regExp=new RegExp("white");
		var regExp=new RegExp("white","g");
		

复合模式

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

eg:
	var reg=/^\w+$/;
	var reg=/^\w+.[a-zA-Z]{2,3}$/;
	...

RegExp 对象

RegExp 方法

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

RegExp 属性

属 性	描 述
global	RegExp 对象是否具有标志 g
ignoreCase	RegExp 对象是否具有标志 i
multiline	RegExp 对象是否具有标志 m

String 对象的方法

方 法	描 述
match	找到一个或多个正则表达式匹配
search	检索与正则表达式相匹配的值
replace	替换与正则表达式匹配的字符串
split	把字符串分割为字符串数组

正则表达式符号

符 号	描 述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符（Tab、空格、Enter 等）
\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 }

HTML5 新增验证属性

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

validity 属性

validityState 对象

属 性	描 述
valueMissing	表单元素设置了 required 特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing 属性会返回 true，否则返回 false
typeMismatch	输入值与 type 类型不匹配。HTML5 新增的表单类型如 email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch 属性则返回 true，否则返回 false
patternMismatch	输入值与 pattern 特性的正则表达式不匹配。如果输入的内容不符合 pattern 验证模式的规则，则 patternMismatch 属性将返回 true，否则返回 false
tooLong	输入的内容超过了表单元素的 maxLength 特性限定的字符长度
rangeUnderflow	输入的值小于 min 特性的值。如果输入的数值小于最小值，则返回 true，反之 false
rangeOverflow	输入的值大于 max 特性的值。
stepMismatch	输入的值不符合 step 特性所推算出的值。用于填写数值的表单元素可能需要同时设置 min 、max 和 step 特性，这就限制了输入的值必须是最小值与 step 特性值的倍数之和
customError	使用自定义的验证错误提示信息。使用 setCustomValidity() 方法自定义错误提示信息：setCustomValidity(message) 会把错误提示信息自定义为 message，此时 customError 属性值为 true；setCustomValidity(" ") 会清除自定义的错误信息，此时 customError 属性值为 false

归纳

本文地址：https://blog.csdn.net/CSDN_chenyang/article/details/107496460