javascript - 为 HTML5 验证创建一个 polyfill

Question

我正在构建一个非常简单的验证插件，它使用了约束验证 API 的一部分。我正在使用 API 的 2 个特性，valueMissing 和 patternMismatch，如下所示:

var el = $(this)[0];

if ( el.validity.valueMissing || el.validity.patternMismatch )  {
        $errMsg.show();
} else {
        $errMsg.hide();
}

我想编写自己的 polyfill，以便这些功能可以在旧版浏览器中使用，而不是使用整个 HTML5 验证库或插件。

所以我想我想要实现的是这样的:

if (!typeof document.createElement( 'input' ).checkValidity == 'function'){
    validity.valueMissing = function(){
        // check for value
    }
}

但是，我不知道该怎么做，也不知道该元素如何用作函数的第一部分:

el.validity.valueMissing

在此先感谢您的任何帮助或建议!

Answer 1

这个多边形会涉及一些工作，但您需要做的是更改 HTMLInputElement 的原型(prototype)，因此每个新实例都有这些方法和属性(有效性、checkValidity 等)。

沿着这些线的东西:

HTMLInputElement.prototype.testMethod = function (e) { console.log(e) };
HTMLInputElement.prototype.testProp = 'foo';
var input = document.createElement('input');
input.testMethod(input.testProp);