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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: ValidityState
slug: Web/API/ValidityState
translation_of: Web/API/ValidityState
---
<div>{{APIRef("HTML DOM")}} {{gecko_minversion_header("2.0")}}</div>
<p><strong><code>ValidityState</code></strong> 介面表示了一個元素目前在其檢核條件下驗證的<em>正確性狀態（validity states）</em>。同時，它們也可以協助解釋元素值檢核失敗的原因，如果元素值為不合法的。</p>
<h2 id="屬性">屬性</h2>
<p>For each of these Boolean properties, a value of <code>true</code> indicates that the specified reason validation may have failed is true, with the exception of the valid property, which is <code>true</code> if the element's value obeys all constraints.</p>
<dl>
<dt>{{domxref("ValidityState.badInput")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the user has provided input that the browser is unable to convert.</dd>
<dt>{{domxref("ValidityState.customError")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the element's custom validity message has been set to a non-empty string by calling the element's <code>setCustomValidity()</code> method.</dd>
<dt>{{domxref("ValidityState.patternMismatch")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value does not match the specified {{htmlattrxref("pattern", "input")}}.</dd>
<dt>{{domxref("ValidityState.rangeOverflow")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value is greater than the maximum specified by the {{htmlattrxref("max", "input")}} attribute.</dd>
<dt>{{domxref("ValidityState.rangeUnderflow")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value is less than the minimum specified by the {{htmlattrxref("min", "input")}} attribute.</dd>
<dt>{{domxref("ValidityState.stepMismatch")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value does not fit the rules determined by the {{htmlattrxref("step", "input")}} attribute (that is, it's not evenly divisible by the step value).</dd>
<dt>{{domxref("ValidityState.tooLong")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value exceeds the specified <code>maxlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects. <em><strong>Note:</strong> This will never be <code>true</code> in Gecko, because elements' values are prevented from being longer than <code>maxlength</code>.</em></dd>
<dt>{{domxref("ValidityState.tooShort")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value fails to meet the specified <code>minlength</code> for {{domxref("HTMLInputElement")}} or {{domxref("HTMLTextAreaElement")}} objects.</dd>
<dt>{{domxref("ValidityState.typeMismatch")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the value is not in the required syntax (when {{htmlattrxref("type", "input")}} is <code>email</code> or <code>url</code>).</dd>
<dt>{{domxref("ValidityState.valid")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the element meets all constraint validations, and is therefore considered to be valid.</dd>
<dt>{{domxref("ValidityState.valueMissing")}} {{ReadOnlyInline}}</dt>
<dd>Is a {{jsxref("Boolean")}} indicating the element has a {{htmlattrxref("required", "input")}} attribute, but no value.</dd>
</dl>
<h2 id="規範">規範</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{ SpecName('HTML WHATWG', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>Live Standard</td>
</tr>
<tr>
<td>{{ SpecName('HTML5.1', '#the-constraint-validation-api', 'ValidityState') }}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>No change from the previous snapshot {{SpecName('HTML5 W3C')}}.</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', 'forms.html#the-constraint-validation-api', 'ValidityState') }}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>First snapshot of {{SpecName('HTML WHATWG')}} containing this interface.</td>
</tr>
</tbody>
</table>
<h2 id="瀏覽器相容性">瀏覽器相容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatVersionUnknown }}</td>
<td>10</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>10.0.3</td>
</tr>
<tr>
<td><code>badInput</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop(29)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>10.0.3</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}</td>
</tr>
<tr>
<td><code>badIndput</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile(29)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="參見">參見</h2>
<ul>
<li><a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation</a></li>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation">Forms: Data form validation</a></li>
</ul>
|
