Question

如何检查浏览器是否具有内置的HTML5表单验证功能？通过这样做，我们不需要在可以自己验证表单的浏览器上应用jQuery表单验证功能。

[解决] 根据ThinkingStiff的回答，这是一种方式：

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

Answer 1

只需检查checkValidity()功能是否存在：

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

function hasFormValidation() {

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

};

这样称呼：

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

Answer 2

您可以使用Modernizr javascript http://www.modernizr.com/执行此操作。您可以从此帖html5 form validation modernizr safari获取帮助。您还可以利用modernizr load

Modernizr.load（）的基本语法是将具有以下属性的对象传递给它：

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

只要你提供其中一个，是和否都是可选的。

要在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

Answer 3

怎么样

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

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

Answer 4

导航器存在问题，例如Android（4.4之前的版本），它实现checkValidity（并且此功能实际上检查输入）但浏览器不向用户提供任何信息（并发送表格）如果某些输入无效。

但是，您可以使用validationMessage检查是否有任何问题。此属性显示浏览器将向用户显示的错误消息。如果checkValidity()为false，但没有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/

Answer 5

以下测试对Safari不起作用：

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

和

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

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

但是，此测试有效：

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

（未在IE或Android上测试）

修改 Safari确实进行了验证，但没有报告，这解释了对这些测试的响应。可以通过CSS :invalid伪类发现无效字段。这些测试的组合可用于验证浏览器不支持验证的位置，并报告浏览器不报告的位置。

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

5 个答案: