HTM5 checkValidity()方法

HTM5 checkValidity() method

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

<!DOCTYPE html>
<html>
<body>
<style>
.valid { color: #0B7866; }
.invalid { color: #0B6877; }
</style>

function check(input) {
var out = document.getElementById('result');

if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML ="<span class='valid'>" + input.id +" valid</span>";
} else {
out.innerHTML ="<span class='invalid'>" + input.id +" not valid</span>";
}
}
console.log(input.checkValidity());
};

<form id="testform" onsubmit="return false;">
<label>Minimum:
<input oninput="check(this)" id="min_input" type=number min=4 />
</label>
</form>
</body>
</html>