表单验证

最新推荐文章于 2021-06-07 21:22:41 发布

CSDN_chenyang

最新推荐文章于 2021-06-07 21:22:41 发布

阅读量261

点赞数 1

分类专栏： jQuery JavaScript 表单验证文章标签： js jquery

本文链接：https://blog.csdn.net/CSDN_chenyang/article/details/107496460

版权

7 篇文章

订阅专栏

5 篇文章

订阅专栏

1 篇文章

订阅专栏

表单验证的优势

表单选择器

语法	描述
: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 元素

表单验证事件和方法

正则表达式优势

定义正则表达式

普通方式

语法 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 属性

String 对象的方法

正则表达式符号

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

在这里插入图片描述