HTML5新增表单验证

HTML5新增属性:

属性	描述
placeholder	提供一种提示,输入域为空时显示,获得焦点输入内容后消失
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特性限定的字符长度,虽然在输入的时候会限制表单内容的长度,但在某种情况下,如通过程序设置,还是会超出最大长度设置,如果输入内容超出了最大长度设置,则tooLong值返回true否则返回false
rangeUnderflow	输入的值小于min特性的值,如果输入的数值小于最小值,则rangeUnderflow的值返回true,否则返回false
rangeOverflow	输入的值大于max特性的值,如果输入的值大于最大值,则rangeOverflow的值返回true,否则返回false
stepMismatch	输入的值不符合step属性推算出的规则.用于填写数值的表单元素可能需要同时设置min,max和step的属性,这就限制了输入的值必须是最小值与step属性值的倍数之和,例如:范围从0到10,step特性值为2,因为合法值为该范围的偶数,其他数值均无法通过验证。如果输入的值不符合要求则stepMismatch返回true否则返回false
customError	使用自定义的错误验证信息.使用setCustomValidity()方法自定义错误提示信息:setCustomValidity(message)会把错误提示信息设置为message,此时customError的值为true,setCustomValidity(“”)会清除定义的错误提示信息,此时customError的值为false

时间： 2024-08-07 04:33:28

HTML5新增表单验证的相关文章

5.9 HTML5 新增表单控件 ---不是特别重要

HTML5 新增表单控件新增类型:网址邮箱日期时间星期数量范围电话颜色搜索这些控件基本不使用:因为在不同的浏览器中效果不一样.产品设计中不允许多个浏览器效果不同,必须统一. <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type=&q

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性表单结构更灵活要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&

HTML5的表单验证实例

HTML5新增加的表单验证可以大大减少你对JavaScript代码的依赖,并且进行丰富的客户端校验,下面提供两个例子. 1.HTML5客户端校验:checkValidity方法 checkValidity方法可以用于检验你的输入是否合法,合法时返回true,否则返回false. <!doctype html> <html> <head> <meta charset="utf-8"> <title>HTML5客户端校验:chec

IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性,仍然可以显示为常规的表单元素. 1 <datalist>元素 <datalist>元素规定输入域的选项列表.<datalist>属性规定form或input域应该拥有自动完成功能.当用户在自动完成域中开始输入时,浏览器应该在该域中显示的填写的选项.Internet Exp

html5新增表单控件和表单属性

新的输入性表单控件: email:电子邮箱文本框,跟普通的没什么区别 - 当输入不是邮箱的时候,验证不通过 - 移动端的键盘会发生变化 tel:电话号码 url:网页的URL search:搜索引擎 - chrome下输入文字后,会多出一个关闭的X range:特定范围内的数值选择器 - min.max.step(步数) - 例子: 用js来显示当前数值 number:只能包含数字的输入框 - 输入框末尾有两个箭头上为加下为减 color:颜色选择器 - 点击显示颜色版 datet

HTML5 新增表单控件

新增类型:网址邮箱日期时间星期数量范围电话颜色搜索 <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type="email" name="" required><br><b

HTML5 新增表单属性

======================================================================================== 1.placeholder ---为文本框设置默认值,用户输入文本时自动隐藏,用户清除文本时自动显示 2.autofocus --- 表单控件会在页面加载时自动获取焦点. 一个页面只能有一个autofocus属性的定义 3.autocomplete --- 可选历史记录直接填入表单 4.mutiple --- 多选可用

HTML5新增表单元素介绍

原文地址:https://www.cnblogs.com/freetimebbs/p/10226890.html