JS 表单相关内容

可以通过DOM操作，访问HTML表单中的值

document.forms["表单名"]["控件名"].value

HTML自动验证 from标签下控件标签添加required字段，会要求非空
不适用于 Internet Explorer 9 或更早的版本

约束验证

约束验证 HTML 输入属性

属性	描述
disabled	规定 input 元素应该被禁用
max	规定 input 元素的最大值
min	规定 input 元素的最小值
pattern	规定 input 元素的值模式
required	规定输入字段需要某个元素
type	规定 input 元素的类型

约束验证 CSS 伪选择器

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

约束验证 DOM 方法

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

约束验证 DOM 属性

属性	描述
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，如果元素值是有效的。