Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 727c26c

Browse files
committed
docs(bom): edit form
1 parent 10a2e3a commit 727c26c

1 file changed

Lines changed: 72 additions & 1 deletion

File tree

‎docs/bom/form.md‎

Lines changed: 72 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,16 @@ for (var pair of formData) {
214214

215215
如果一个控件通过验证,它就会匹配`:valid`的 CSS 伪类,浏览器会继续进行表单提交的流程。如果没有通过验证,该控件就会匹配`:invalid`的 CSS 伪类,浏览器会终止表单提交,并显示一个错误信息。
216216

217+
```css
218+
input:invalid {
219+
border-color: red;
220+
}
221+
input,
222+
input:valid {
223+
border-color: #ccc;
224+
}
225+
```
226+
217227
### checkValidity()
218228

219229
除了提交表单的时候,浏览器自动校验表单,还可以手动触发表单的校验。表单元素和表单控件都有`checkValidity()`方法,用于手动触发校验。
@@ -279,7 +289,33 @@ if (!myInput.checkValidity()) {
279289

280290
控件元素的`setCustomValidity()`方法用来定制校验失败时的报错信息。它接受一个字符串作为参数,该字符串就是定制的报错信息。如果参数为空字符串,则上次设置的报错信息被清除。
281291

282-
如果调用这个方法,并且参数不为空字符串,浏览器就会认为控件没有通过校验,就会立刻显示该方法设置的报错信息。
292+
这个方法可以替换浏览器内置的表单验证报错信息,参数就是要显示的报错信息。
293+
294+
```html
295+
<form action="somefile.php">
296+
<input
297+
type="text"
298+
name="username"
299+
placeholder="Username"
300+
pattern="[a-z]{1,15}"
301+
id="username"
302+
>
303+
<input type="submit">
304+
</form>
305+
```
306+
307+
上面的表单输入框,要求只能输入小写字母,且不得超过15个字符。如果输入不符合要求(比如输入"ABC"),提交表单的时候,Chrome 浏览器会弹出报错信息"Please match the requested format.",禁止表单提交。下面使用`setCustomValidity()`方法替换掉报错信息。
308+
309+
```javascript
310+
var input = document.getElementById('username');
311+
input.oninvalid = function (event) {
312+
event.target.setCustomValidity(
313+
'用户名必须是小写字母,不能为空,最长不超过15个字符'
314+
);
315+
}
316+
```
317+
318+
上面代码中,`setCustomValidity()`方法是在`invalid`事件的监听函数里面调用。该方法也可以直接调用,这时如果参数不为空字符串,浏览器就会认为该控件没有通过校验,就会立刻显示该方法设置的报错信息。
283319

284320
```javascript
285321
/* HTML 代码如下
@@ -345,6 +381,37 @@ if (document.getElementById('myInput').validity.rangeOverflow) {
345381
document.getElementById('prompt').innerHTML = txt;
346382
```
347383

384+
如果想禁止浏览器弹出表单验证的报错信息,可以监听`invalid`事件。
385+
386+
```javascript
387+
var input = document.getElementById('username');
388+
var form = document.getElementById('form');
389+
390+
var elem = document.createElement('div');
391+
elem.id = 'notify';
392+
elem.style.display = 'none';
393+
form.appendChild(elem);
394+
395+
input.addEventListener('invalid', function (event) {
396+
event.preventDefault();
397+
if (!event.target.validity.valid) {
398+
elem.textContent = '用户名必须是小写字母';
399+
elem.className = 'error';
400+
elem.style.display = 'block';
401+
input.className = 'invalid animated shake';
402+
}
403+
});
404+
405+
input.addEventListener('input', function(event){
406+
if ( 'block' === elem.style.display ) {
407+
input.className = '';
408+
elem.style.display = 'none';
409+
}
410+
});
411+
```
412+
413+
上面代码中,一旦发生`invalid`事件(表单验证失败),`event.preventDefault()`用来禁止浏览器弹出默认的验证失败提示,然后设置定制的报错提示框。
414+
348415
### 表单的 novalidate 属性
349416

350417
表单元素的 HTML 属性`novalidate`,可以关闭浏览器的自动校验。
@@ -553,3 +620,7 @@ xhr.open('POST', 'myserver/uploads');
553620
xhr.setRequestHeader('Content-Type', file.type);
554621
xhr.send(file);
555622
```
623+
624+
## 参考链接
625+
626+
- [HTML5 Form Validation With the "pattern" Attribute](https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145), Thoriq Firdaus

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /