HTML5: 表单验证

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

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

    描述表单验证的要求

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

    required 验证

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

    min/max/step 验证

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

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

    maxlength 验证

    限定字段的最大长度。

    pattern 验证

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

    (@required="required" 不能为空)
    (@pattern="\d+-\d+-\d+" 只允许输入类似 2009-03-13 这样的格式)

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

    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: "*";
    }
    
    

    参考资源

    标签:

      分享到:
      comments powered by Disqus

      27/30ms