Html5之高级-3 HTML5表单验证(验证属性验证状态)

Posted 2020-07-01

一、验证属性

Required 属性

    - Required 属性主要防止域为空时提交表单。该属性不需要设置任何值

    - 语法:

Pattern 属性

    - Pattern 属性的作用是实现元素的验证。它支持使用正则表达式定制验证规则

    - 语法:

Min 和 Max 属性

    - min、max和step属性用于为包含数字或日期的input类型规定限定(约束)

    - 语法:

Minlength 和 Maxlength 属性

    - Minlength 和 Maxlength 属性的作用是定制元素允许的最小字符数和最大字符数

    - 语法:

validity 属性

    - 在 html5提供的有关表单验证的新特性中，提供了一个validity属性。该属性是利用ValidityState 对象描述指定元素的有效状态

    - ValidityState 对象代表了有效状态，可以实现对指定元素进行约束验证功能。该对象提供了一系列的属性，这些属性用于描述指定元素的有效状态

    - 如何获取 ValidityState 对象，使用其提供的属性内容

        - 语法: 指定元素.validity可以得到 ValidityState 对象

        - 例子: Elem .validity .valid

二、验证状态

valid 状态

    - 执行完毕，我们会得到一个布尔值，它表示表单控件是否已通过了所有的验证约束条件。可以把valid特性看做是最终验证结果: 如果所有约束条件都通过了，valid的值就是true,否则，只要有一项约束没通过，valid的值都是false

valueMissing 状态

    - 如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true

typeMismatch 状态

    - 如果输入语法不符合指定的类型，那么这个状态就是true

    - 例如: email类型输入元素的内容不是电子邮件地址

patternMismatch 状态

    - 如果输入内容与所设置模式不匹配，那么这个状态就是true

tooLong 状态

    - 如果输入内容长度大于maxlength属性指定值，那么这个状态就是true

rangeUnderflow 状态

    - 如果输入内容小于min属性声明的值，那么这个状态就是true

stepMismatch 状态

    - 如果给定的值与min,max,step不一致，那么这个状态就是true

customError 状态

    - 如果元素使用setCustomValidity()方法设置了自定义错误，那么这个状态就是true

总结：本章内容主要介绍了下 HTML5表单验证(验证属性、验证状态)

本文出自 “技术交流” 博客，谢绝转载！