Jam*_*sen 12 javascript browser validation html5
HTML5规范定义了一些非常有趣的验证组件,包括模式(用于验证Regexp)和必需(用于根据需要标记字段).但是,我可以告诉您,没有浏览器实际上根据这些属性进行任何验证.
我找到了跨引擎的HTML5支持的比较,但没有关于验证的信息.在我尝试过的浏览器中(Firefox 3.5.8和Safari 4.0.4),没有对象有checkValidity()方法,所以即使我可以定义它们也无法运行验证.
有没有对此功能的支持,所以我可以试验？
当然.歌剧和Chromium.但你可以测试自己:
function supportsValidity(){
var i = document.createElement('input');
return typeof i.validity === 'object'
}
这是一个指向沙盒的链接,您可以在其中查看Opera和Chrome:http: //jsfiddle.net/vaZDn/light/
我在Google Chrome中测试了以下内容:
<!DOCTYPE html>
<html>
<body>
<style>
.valid { color: #0d0; }
.invalid { color: #d00; }
</style>
<div id="output"></div>
<script>
function check(input) {
var out = document.getElementById('output');
if (input.validity) {
if (input.validity.valid === true) {
out.innerHTML = "<span class='valid'>" + input.id +
" is valid</span>";
} else {
out.innerHTML = "<span class='invalid'>" + input.id +
" is not valid</span>";
}
}
console.log(input.checkValidity());
};
</script>
<form id="testform" onsubmit="return false;">
<label>Required:
<input oninput="check(this)" id="required_input"
required />
</label><br>
<label>Pattern ([0-9][A-Z]{3}):
<input oninput="check(this)" id="pattern_input"
pattern="[0-9][A-Z]{3}"/>
</label><br>
<label>Min (4):
<input oninput="check(this)" id="min_input"
type=number min=4 />
</label><br>
</form>
</body>
</html>
Stangely,该<element>.validity.valid属性似乎正常工作,但调用<element>.checkValidity()总是返回true,所以它看起来还没有实现.
| 归档时间： |
|
| 查看次数： |
24731 次 |
| 最近记录： |