0

我正在创建一个 html5 JS 表单库。这个想法是将具有 .form-item 类的元素转换为内容可编辑的 div，使用元素的数据属性作为应创建的表单项类型、验证等的说明。

下面的代码为单个表单项创建了一个验证对象，用于检查是否满足字段值的最小长度。对象的属性包括它应用到的 DOM 元素 (el)、字段的最小长度 (minLen)、如果不满足最小长度应显示的错误消息 (msgError) 以及返回的函数 (submit)对象是否验证，如果没有，则显示错误消息。

但是，提交属性函数总是返回 false。我很确定我知道为什么，但我不确定纠正它的最佳方法。我相信我遇到的问题与闭包的概念有关。submit 属性检查表单项元素的 innerHTML 的长度，并将其与 minLen 属性进行比较。但我认为这只发生在验证对象的实例化时刻，innerHTML.length 始终为 0（因为表单项和验证对象必须在用户能够在字段中输入任何内容之前创建） ）。我应该如何修改下面的代码，以便提交属性函数在任何时候重新运行（从而检查字段的 innerHTML 的当前长度，而不是实例化时的长度）？

function formValidateMinLen(item){
    var minLen = item.attr('data-minLen');

    this.el = item;
    this.minLen = minLen;
    this.msgError = item.attr('data-error_minLen');
    this.submit = function(){
        if(this.el.html() >= this.minLen){
            return true;
        }else{
            this.el.after('<div class="msgError">' + this.msgError + '</div>');
            return false;
        }
    }
}

item = new formValidateMinLen($('#registration-form .form-item:first'));

我确实提出了一种解决方案，即将表单项元素的 innerHTML 作为参数传递给提交属性函数，如下所示：

this.submit = function(html){
    if(html >= this.minLen){
        ...
    }

item = new formValidateMinLen($('#registration-form .form-item:first'));
item.submit($('#registration-form .form-item:first').html());

但是，我不喜欢该解决方案，因为必须在 item.submit 代码中重新指定 DOM 元素似乎是多余的（因为对象已经在其 el 属性中包含该 DOM 元素）。

所以我该怎么做？

4

1 回答 1

1

我是个白痴。我将 innerHTML 与最小长度进行比较，而不是将 innerHTML 的 LENGTH 与最小长度进行比较。现在它可以工作了:)

于 2011-02-12T16:47:15.923 回答