Javascript 创建用于HTML5验证的多边形填充

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

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

---

提前感谢您的帮助或建议

这个多边形需要做一些工作，但您需要做的是更改

HTMLInputElement

的原型，因此每个新实例都有这些方法和属性yes（

validity

，

checkValidity

等等）

大致如下：

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

---

所以我最终在Poelinca的答案的帮助下解决了这个问题

if ( typeof document.createElement( 'input' ).checkValidity !== 'function' ) {
    Object.defineProperty( Element.prototype, 'validity', {
        get: function() {
            return this;
        }
    });

    Object.defineProperty( Element.prototype.validity, 'valueMissing', {
        get: function() {
            return this.value !== "";
        }
    });

    Object.defineProperty( Element.prototype.validity, 'patternMismatch', {
        get: function() {
            var pattern = this.getAttribute('pattern'),
                regEx = pattern !== null ? eval( "{/" + pattern + "/}" ) : "";
                value = this.value;

            if ( regEx !== "" ) {
                return regEx.test( value );
            } else {
                return true;
            }
            return false;
        }
    });
}

我使用了Object.defineProperty，因此可以在不使用括号的情况下调用函数，这就是本机约束验证API的工作方式：

if ( el.validity.valueMissing || el.validity.patternMismatch )  { //...

从我的研究中我了解到，像这样扩展DOM并不是真正的建议，因为您可能会遇到很多问题。详情请阅读。这些评论特别有用，因为这篇文章已经过时了

在我的例子中，我尝试做的很简单，我只需要支持IE8+。也许有点过分，但我喜欢

请随时改进/评论我的答案

---

谢谢

第一个示例中的

el

是什么类型的对象？它是一个JavaScript DOM元素：var el=$（this）[0]；谢谢你的帮助，琳卡。这无疑为我指明了正确的方向，所以你的答案是+1。然而，我不能标记为正确的，因为它不是完整的答案