检查浏览器是否有内置的 HTML5 表单验证？答案

【问题标题】：Check if a browser has built-in HTML5 form validation?检查浏览器是否有内置的 HTML5 表单验证？
【发布时间】：2012-01-22 22:51:22
【问题描述】：

如何检查浏览器是否具有内置的 HTML5 表单验证能力？这样一来，我们就不需要在可以自行验证表单的浏览器上应用jQuery表单验证功能了。

[已解决] 根据 ThinkingStiff 的回答，这里有一种方法：

if (typeof document.createElement("input").checkValidity == "function") {
    alert("Your browser has built-in form validation!");
}

【问题讨论】：

标签： html validation

【解决方案1】：

只需检查checkValidity()函数是否存在：

演示：http://jsfiddle.net/ThinkingStiff/cmSJw/

function hasFormValidation() {

    return (typeof document.createElement( 'input' ).checkValidity == 'function');

};

这样称呼它：

if( hasFormValidation() ) {
    //HTML5 Form Validation supported
};

【讨论】：

谢谢。这种方法看起来很简洁。我在本地服务器上测试过，IE6/7/8/9似乎无法运行。有解决方法吗？
我明白了。那是因为IE6/7/8/9不能很好的播放textContent。
Safari 和一些移动 webkit 浏览器（包括 3.0 之前版本中的默认 Android 浏览器）具有 checkValidity 方法的实现。但是，当表单无效时，浏览器绝对不会向用户提供任何反馈，并允许提交表单。这使得 checkValidity 方法在测试浏览器是否支持约束验证 api 时不可靠。
HTMLFormElement.prototype.checkValidity 不是一种更简洁的检查存在性的方法吗？
@ThinkingStiff 不确定，但它是 Dom 规范 2[1] 的一部分，因此随处可用。它是一个构造函数，所以总是有一个HTMLFormElement.prototype 可用。所以checkValidity 要么是undefined，要么是一个函数。就像Foo = function() {}; Foo.prototype.checkValdity，IMO 是安全的。 1.aptana.com/reference/api/HTMLFormElement.html

【解决方案2】：

您可以使用 Modernizr javascript http://www.modernizr.com/ 来做到这一点。您可以从这篇文章 html5 form validation modernizr safari 中获得帮助。您还可以利用 modernizr 负载

Modernizr.load() 的基本语法是传递一个具有以下属性的对象：

测试：您要检测的 Modernizr 属性。
是的：如果测试成功，您要加载的脚本的位置。为多个脚本使用一个数组。
不：如果测试失败，您要加载的脚本的位置。为多个脚本使用一个数组。
完成：加载外部脚本后立即运行的函数（可选）。

yep 和 nope 都是可选的，只要您提供其中之一即可。

要加载并执行 check_required.js 中的脚本，请在将modernizr.adc.js 附加到页面后添加以下块（代码在 required_load.html 中）：

<script>
  Modernizr.load({
    test: Modernizr.input.required,
    nope: 'js/check_required.js',
    complete: function() {
      init();
    }
  });
</script>

来源：http://www.adobe.com/devnet/dreamweaver/articles/using-modernizr.html

【讨论】：

【解决方案3】：

怎么样

function hasFormValidation() {
  return 'noValidate' in document.createElement('form');
}

来源：http://diveintohtml5.info/everything.html#novalidate

【讨论】：

这是截至 2020 年 7 月的最佳解决方案。

【解决方案4】：

像 Android 这样的导航器（4.4 之前的版本）存在问题，它实现了checkValidity（这个函数实际上检查输入）但浏览器不向用户提供任何信息（并发送表单) 如果某些输入无效。

但是，您可以使用validationMessage 检查是否有任何问题。此属性向您显示浏览器将向用户显示的错误消息。如果checkValidity() 为假但没有validationMessage，则浏览器没有完整的html5 表单验证支持。

我已经做了这个功能。它要求表单中的所有字段作为参数：

canValidateFields() {    
    var result = typeof document.createElement( 'input' ).checkValidity == 'function';
    if (result) {
        for (var i = 0; i < arguments.length; i++) {
            var element = document.getElementById(arguments[i]);
            if (!element.checkValidity() && (!element.validationMessage || element.validationMessage === null || element.validationMessage === '')) {
                return false;
            }
        }
    }
    return result;
}

示例：http://jsfiddle.net/pmnanez/ERf9t/2/

【讨论】：

Safari 8.0.4 仍然返回 true，尽管缺少内置验证。

【解决方案5】：

以下测试不适用于 Safari：

'noValidate' in document.createElement('form')

和

typeof document.createElement( 'input' ).checkValidity == 'function'

他们在预期 false 时报告 true，因为 Safari 不会报告无效字段。

但是，此测试有效：

'reportValidity' in document.createElement('form')

（未在 IE 或 Android 上测试）

编辑： Safari 会验证，但不会报告，这解释了对这些测试的响应。可以通过 CSS :invalid 伪类发现无效字段。这些测试的组合可用于验证浏览器不支持验证的地方，并报告浏览器不报告的地方。

【讨论】：