HTML5: 表单验证

风行水上 @ 2014-09-04 10:56:43

标签： html5

关于表单输入可以参见 HTML5: 表单输入

描述表单验证的要求

下列属性用于描述输入控件的验证要求。

required 验证

required属性要求输入框的内容不能为空。

min/max/step 验证

限定数值类型和日期类型的范围和步长。

对于step来说，就是要求 value = min + step*n

maxlength 验证

限定字段的最大长度。

pattern 验证

pattern属性通过一个正则表达式来指定允许输入的格式。

表单验证相关的属性和方法

validity 属性

validity只读属性用于反应控件的校验状态信息。

input.validity = {
  badInput: false
  customError: false
  patternMismatch: false
  rangeOverflow: false
  rangeUnderflow: false
  stepMismatch: false
  tooLong: false
  typeMismatch: false
  valid: true
  valueMissing: false
  __proto__: ValidityState
}

validationMessage 属性

validationMessage只读属性的内容是用户自定义的校验失败提示信息。

该属性的值需要通过控件的setCustomValidity()方法来设置。

表单验证相关的CSS

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

*:required:after {
  content: "*";
}

参考资源

标签： html5