1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
---
title: ValidityState
slug: Web/API/ValidityState
tags:
- API
- HTML DOM
- 接口
- 表单
- 输入
translation_of: Web/API/ValidityState
---
<div>{{APIRef("HTML DOM")}} {{gecko_minversion_header("2.0")}}</div>
<p>DOM接口 <code>ValidityState</code> 代表一个元素可有的有效性状态（<em>validity states</em>），其与约束验证（constraint validation）相关。这些状态一起解释了当元素值无效时，它的值为什么不能通过验证。</p>
<h2 id="属性">属性</h2>
<p>对于以下每一个布尔值属性来说，值为 <code>true</code> 表示这就是验证失败的特定原因之一；<strong>valid </strong>属性是例外，它为 <code>true</code> 表示元素值满足所有的约束条件。</p>
<dl>
<dt>{{domxref("ValidityState.badInput", "badInput")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示用户提供了浏览器不能转换的输入。</dd>
<dt>customError {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，表示这个元素的自定义验证信息是否已通过调用元素的 {{domxref('HTMLObjectElement.setCustomValidity', 'setCustomValidity()')}} 方法设置为一个非空字符串。</dd>
</dl>
<dl>
<dt>{{domxref("ValidityState.patternMismatch", "patternMismatch")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示元素值不匹配规定的{{htmlattrxref("pattern", "input")}}，<code>false</code> 则表示匹配。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。</dd>
<dt>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示值已超过 {{htmlattrxref("max", "input")}} 属性规定的最大值，<code>false</code> 则表示小于或等于这个最大值。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。</dd>
<dt>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示值小于 {{htmlattrxref("min", "input")}} 属性规定的最小值，<code>false</code> 则表示大于或等于这个最小值。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。</dd>
<dt>{{domxref("ValidityState.stepMismatch", "stepMismatch")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示值不符合由 {{htmlattrxref("step", "input")}} 属性规定的规则（即该值不能被步长值除尽，译注：假设最小值是0）。<code>false</code> 表示其符合步长值规则。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。</dd>
<dt>{{domxref("ValidityState.tooLong", "tooLong")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示值超过了{{domxref("HTMLInputElement")}} 或 {{domxref("HTMLTextAreaElement")}} 对象中规定的 <code>maxlength</code>， <code>false</code> 表示值的长度小于或等于最大长度。<em><strong>注意：</strong>This这个属性在Gecko中永远不会是 <code>true</code>，因为元素值不允许比 <code>maxlength</code> 长。</em><code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。</dd>
<dt>{{domxref("ValidityState.tooShort", "tooShort")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示值的长度小于 {{domxref("HTMLInputElement")}} 或 {{domxref("HTMLTextAreaElement")}} 对象中规定的 <code>minlength</code>， <code>false</code> 表示值的长度大于或等于最大长度。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 和 {{cssxref(":out-of-range")}} 匹配。</dd>
<dt>{{domxref("ValidityState.typeMismatch", "typeMismatch")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示元素值不满足所需的格式（可见于 {{htmlattrxref("type", "input")}} 是 <code>email</code> 或 <code>url</code> 时），<code>false</code> 表示格式正确。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。</dd>
<dt>valid {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}，<code>true</code> 表示元素满足所有的验证约束，因此被认为时有效的，<code>false</code> 表示有任一约束不满足。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":valid")}} 匹配，否则可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。</dd>
<dt>{{domxref("ValidityState.valueMissing", "valueMissing")}} {{ReadOnlyInline}}</dt>
<dd>一个 {{jsxref("Boolean")}}， <code>true</code> 表示元素拥有 {{htmlattrxref("required", "input")}} 属性，但没有值，否则为 <code>false</code>。<code>true</code> 的时候元素可用 CSS 伪类 {{cssxref(":invalid")}} 匹配。</dd>
</dl>
<h2 id="属性_2">属性</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG', 'form-control-infrastructure.html#validitystate', 'ValidityState') }}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Living Standard</td>
</tr>
<tr>
<td>{{ SpecName('HTML5.1', 'sec-forms.html#validitystate-validitystate', 'ValidityState') }}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
</tr>
<tr>
<td>
<p>{{ SpecName('HTML5 W3C', 'forms.html#validitystate', 'ValidityState') }}</p>
</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>
<p>First snapshot of {{SpecName('HTML WHATWG')}} containing this interface.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("api.ValidityState")}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/Web/Guide/HTML/HTML5/Constraint_validation">约束验证</a></li>
<li><a href="/zh-CN/docs/Learn/HTML/Forms/Data_form_validation">表单数据校验</a></li>
</ul>
|
