2019-08-28JS表单

数据验证

确保正确的用户输入

典型的验证任务是：

• 用户是否已填写所有必需的字段？
• 用户是否已输入有效的日期？
• 用户是否在数字字段中输入了文本？

服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。
客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。

---

HTML 约束验证

HTML 输入属性，CSS 伪选择器，DOM 属性和方法

HTML5 引入的验证概念——约束验证（constraint validation）

约束验证 HTML 输入属性

表单元素，主要指 input标签 的 属性

属性	描述	补充笔记
type	规定 input 元素的类型
value	规定输入字段的初始值	value= "值"
max 或 min	规定 input 元素的最大或小值	max = "Number" input：number
readonly	规定输入字段为只读（不能修改）	readonly
disabled	规定 input 元素被禁用 不可用，不可点击，不会被提交	disabled
required	规定输入字段需要某个元素	required
autofocus	页面加载时自动获得焦点	autofocus
autocomplete	当自动完成开启，浏览器会基于用户之前的输入值自动填写值	autocomplete="on" autocomplete="off" form input：text、search、url、tel、email、password、datepickers、range 以及 color。
size	规定input的尺寸（以字符计）	size="正整数" 默认为20 input：text 不会限制用户输入的多少
maxlength	规定输入字段允许的最大长度	限制用户输入的多少 不会提供反馈(手写JS代码提醒用户)
pattern	规定 input 元素的值模式
form	input所属的一个或多个表单	form="formId1"
formaction
formenctype
formmethod
formnovalidate
formtarget
height 和 width
list
multiple
pattern (regexp)
placeholder
step

详解 readonly 和 disabled

约束验证 CSS 伪选择器

选择器	描述
:disabled	选择设置了 "disabled" 属性的 input 元素
:invalid	选择带有无效值的 input 元素
:optional	选择未设置 "required" 属性的 input 元素
:required	选择设置了 "required" 属性的 input 元素
:valid	选择带有有效值的 input 元素

约束验证 DOM 属性 和 方法

方法

属性	描述
checkValidity()	返回 true，如果 input 元素包含有效数据
setCustomValidity()	设置 input 元素的 validationMessage 属性

属性

属性	描述
validity	包含与 input 元素的合法性相关的布尔属性。
validationMessage	包含当 validity 为 false 时浏览器显示的消息。
willValidate	指示是否验证 input 元素。

validity属性包含的一系列属性

属性	描述
customError	设置为 true，如果设置自定义的合法性消息。
patternMismatch	设置为 true，如果元素值不匹配其 pattern 属性。
rangeOverflow	设置为 true，如果元素值大约其 max 属性。
rangeUnderflow	设置为 true，如果元素值小于其 min 属性。
stepMismatch	当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。
tooLong	设置为 true，如果元素值超过了其 maxLength 属性。
typeMismatch	当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。
valueMissing	设置为 true，如果元素（包含 required）没有值。
valid	设置为 true，如果元素值是有效的。