Question

我正在构建一个非常简单的Validation插件，该插件使用部分Constraint验证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

这个poly会涉及到一些工作，但你需要做的是改变HTMLInputElement的原型，所以每个新实例都有这些方法和属性（{{1} }，validity等等。

这些方面的东西：

checkValidity

Answer 2

所以我终于在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，所以我可以在不使用括号的情况下调用该函数，这就是本机Constraint验证API的工作原理：

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

从我的研究中我了解到，像这样扩展DOM并不是真的值得推荐，因为你可能遇到很多问题。有关详细信息，请阅读this article。这篇评论特别有用，因为这篇文章已经过时了。

在我的情况下，我尝试做的很简单，我只需要支持IE8 +。也许有点矫枉过正，但我喜欢它。

请随意改进/批评我的答案！

谢谢！

为HTML5验证创建polyfill

2 个答案: