欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

表单验证

程序员文章站 2022-06-19 16:07:14
表单验证表单验证的优势减轻服务器的压力保证输入的数据符合要求表单选择器语 法描 述:input匹配所有 input、textarea、select 和 button元素:text匹配所有单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:image匹配所有图像域:reset匹配所有重置按钮:button匹配所有按钮:fil...

表单验证

表单验证的优势

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

表单选择器

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