可以通过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,如果元素值是有效的。 |