Javascript 是否有任何浏览器支持 HTML5 的 checkValidity() 方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2421218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Do any browsers yet support HTML5's checkValidity() method?
提问by James A. Rosen
The HTML5 spec defines some very interesting validation components, including pattern(for validating against a Regexp) and required(for marking a field as required). As best I can tell, however, no browser yet actually does any validation based on these attributes.
HTML5 规范定义了一些非常有趣的验证组件，包括模式（用于根据 Regexp 进行验证）和required（用于将字段标记为required）。然而，据我所知，目前还没有浏览器真正根据这些属性进行任何验证。
I found a comparison of HTML5 support across engines, but there is no information about validation there. In the browsers I've tried (Firefox 3.5.8 and Safari 4.0.4), no object has a checkValidity()method, so I can't run the validations even though I can define them.
我找到了跨引擎 HTML5 支持的比较，但没有关于验证的信息。在我尝试过的浏览器（Firefox 3.5.8 和 Safari 4.0.4）中，没有对象具有checkValidity()方法，因此即使我可以定义它们，我也无法运行验证。
Is there any support for this feature out there so I can experiment?
是否有对此功能的支持，以便我可以进行试验？
采纳答案by Arne Roomann-Kurrik
I tested the following in 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, the <element>.validity.validproperty seems to work correctly, but calling <element>.checkValidity()always returns true, so it looks like that's not implemented yet.
奇怪的是，该<element>.validity.valid属性似乎工作正常，但调用<element>.checkValidity()总是返回 true，所以看起来还没有实现。
回答by miketaylr
Sure. Opera and Chromium. But you can test yourself:
当然。歌剧和铬。但是你可以测试自己：
function supportsValidity(){
var i = document.createElement('input');
return typeof i.validity === 'object'
}
Here's a link to a sandbox where you can see Opera and Chrome in action: http://jsfiddle.net/vaZDn/light/
这是沙箱的链接，您可以在其中看到 Opera 和 Chrome 的运行情况：http: //jsfiddle.net/vaZDn/light/
回答by cpi
checkValidity() is suppost to work on either the form as a whole or an individual input.
checkValidity() 支持处理整个表单或单个输入。
“此外，checkValidity() 方法可以在单个字段或整个表单上执行，并返回 true 或 false。执行该方法还将以编程方式为所有无效字段触发 invalid 事件，或者，如果在单个字段，仅适用于该元素。”
taken from a List Apart - http://www.alistapart.com/articles/forward-thinking-form-validation/
取自 List Apart - http://www.alistapart.com/articles/forward-thinking-form-validation/
“form . checkValidity() 如果表单的控件都有效，则返回 true；否则，返回 false。” http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validationhttp://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraint-validation
"valid = element . checkValidity() Returns true if the element's value has no validity problems; false otherwise. Fires an invalid event at the element in the latter case." http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation
“valid = element .checkValidity() 如果元素的值没有有效性问题，则返回 true；否则返回 false。在后一种情况下，在元素上触发无效事件。” http://www.w3.org/TR/2011/WD-html5-20110525/forms.html#client-side-form-validation
W3C - working draft.
W3C - 工作草案。
回答by David says reinstate Monica
According to Dive into HTML5:
When an Opera user tries to submit a form with an field, Opera automatically offers RFC-compliant email validation, even if scripting is disabled. Opera also offers validation of web addresses entered into fields, and numbers in fields. The validation of numbers even takes into account the min and max attributes, so Opera will not let you submit the form if you enter a number that is too large.
当 Opera 用户尝试提交带有字段的表单时，Opera 会自动提供符合 RFC 的电子邮件验证，即使禁用了脚本。Opera 还提供对输入到字段中的网址和字段中的数字的验证。数字的验证甚至考虑了 min 和 max 属性，因此如果您输入的数字太大，Opera 不会让您提交表单。
(The quoted paragraph is about the last in the article.)
（引用的段落大约是文章的最后一段。）
So far as I'm aware -and bearing in mind I've not tested with Opera 10, I'm taking their word for it- no other browser yet validates forms automatically.
据我所知 - 记住我没有用 Opera 10 测试过，我相信他们的话 - 没有其他浏览器可以自动验证表单。
回答by Adam
Opera 10 has some HTML5 form validation http://dev.opera.com/articles/view/improve-your-forms-using-html5/. But, I don't think it has checkValidation().
Opera 10 有一些 HTML5 表单验证http://dev.opera.com/articles/view/improve-your-forms-using-html5/。但是，我认为它没有 checkValidation()。
回答by bruce
If you mean checkValidity() then, yes, Opera supports it.
如果您的意思是 checkValidity() 那么，是的，Opera 支持它。
Disclosurey thang: I work for Opera.
Disclosurey thang：我在 Opera 工作。
