html5 JS フォーム ライブラリを作成しています。アイデアは、.form-item のクラスを持つ要素をコンテンツ編集可能な div に変換することです。要素のデータ属性を、作成する必要があるフォーム アイテムのタイプ、検証などの指示として使用します。
以下のコードは、フィールド値の最小長が満たされているかどうかを確認する単一のフォーム アイテムの検証オブジェクトを作成します。オブジェクトのプロパティには、適用される DOM 要素 (el)、フィールドの最小長 (minLen)、最小長に達しない場合に表示されるエラー メッセージ (msgError)、および返す関数 (submit) が含まれます。オブジェクトが検証されるかどうか。検証されない場合はエラー メッセージが表示されます。
ただし、submit プロパティ関数は常に false を返します。理由はわかっていますが、それを修正する最善の方法はわかりません。私が直面している問題は、閉鎖の概念に関係していると思います。submit プロパティは、フォーム item 要素の innerHTML の長さをチェックし、それを minLen プロパティと比較します。しかし、これは検証オブジェクトのインスタンス化の瞬間にのみ発生すると思います. )。以下のコードを変更して、submit プロパティ関数が呼び出されるたびに新たに実行されるようにするにはどうすればよいですか (それにより、インスタンス化の瞬間の長さではなく、フィールドの 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 を引数として送信プロパティ関数に渡すという 1 つの解決策を思いつきました。
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 要素が既に含まれているため)。
それで...どうすればいいですか?