2

以前に同様の質問を投稿したことがありますが、コードを愚かにコピーして貼り付けていることがわかりました。

とにかく、私は以下を組み合わせることができます..助けてください..私は学習過程にあります。

私は以下を持っている参照してください：

$(document).on('blur', 'input.email', function() {
    validate_Email_Input(this);
});

$(document).on('blur', 'input.id', function() {
    validate_Id_Input(this);
});

$(document).on('blur', 'input.pass', function() {
    validate_Pass_Input(this);
});

$(document).on('blur', 'input.town', function() {
    validate_Town_Input(this);
});

$(document).on('blur', 'input.relation', function() {
    validate_Relation_Input(this);
});

$(document).on('blur', 'input.contact', function() {
    validate_Relation_Input(this);
});

そして、それらすべてについて、私は別々の機能を持っています.1つの例を次に示します。

function validate_Email_Input(el) {
    var $this = $(el);
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}

私は本当に効率的なコードを書く方法を学びたいと思っています。

これがまったく役立つかどうかはわかりません。しかし、私がやろうとしているのは、すべてを検証し、特定のフィールドごとにメッセージを表示することです。これは jQuery での私の最初の本当に大きなプロジェクトであり、私が取り組んでいることをすべてお見せしたいと思いました: http://jsfiddle.net/dawidvdh/36BLm/

有効な ID のサンプル: 85 0929 5266086

4

5 に答える 5

1

これは、最初のコード ブロックとまったく同じことを行うはずです。

$(document)
.on('blur', 'input.email', validate_Email_Input)
.on('blur', 'input.id', validate_Id_Input)
.on('blur', 'input.pass', validate_Pass_Input)
.on('blur', 'input.town', validate_Town_Input)
.on('blur', 'input.relation', validate_Relation_Input)
.on('blur', 'input.contact', validate_Relation_Input);

編集：コメンターのイアンは正しいです。これを機能させるには、2 番目のコード ブロックを次のように変更する必要があります。

function validate_Email_Input() {
    var $this = $(this); // This line has changed
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}
于 2013-01-22T15:34:29.633 に答える
1

各フィールド セレクターをそのバリデーター関数にマッピングするオブジェクトを作成し、単一のイベント ハンドラー内からループすることができます。

$(document).on('blur', function(e) {
    var validators = {
        'input.email' : validate_Email_Input,
        'input.id' : validate_Id_Input
        // etc
    };
    for(var field in validators) {
        if($(e.target).is(field)) {
            validators['field'](e.target);
        }
    }
}
于 2013-01-22T15:32:12.483 に答える
0

それをリファクタリングするには、モデルを作成できます。

var myInputsModel = [
    { a: 'input.email' }, // you can store all the information you want in the model...
    { a: 'input.id' },
    etc...
];

したがって、それらすべてに対して 1 つの関数しか得られません。

$.each(myInputsModel, function(i, v) {
    $(document).on('blur', v.a, function() {
        // One function for all of them.
        mySingleFunction(this);
    });
});


function mySingleFunction(el) {
    var $this = $(el);
    var input_groups = $this.parent();
    var isValid = true;
    $.each(input_groups , function(i){
        var inpg = input_groups[i];
        email_values = $.map($(inpg).children('input'), function(e,i){
            return $(e).val();
        }).join('');
        isValid = isValid && validate_Email(email_values, input_groups.parent().parent().parent());
    });
    return isValid;
}
于 2013-01-22T15:38:38.430 に答える
0 
$("#my_form").submit(function(e){
    var valid = 1;
    var error_msg = "";
    //validate fields here, if fails set valid to 0 and error_msg to whatever
    if(!valid){
      e.preventDefault();
      alert(error_msg);
    }
});
于 2013-01-22T15:46:29.910 に答える
-1

これが1つのアプローチです。すべての html 要素に共通のクラスを与えることから始め、値の型に data 属性を使用します。

<input type="text" class="validate" data-value-type="town" />

サンプル jQuery + JavaScript

// Make an object matching strings to functions
var functionMap = {
  email: emailFunction(),
  id: idFunction(),
  pass: passFunction(),
  town: townFunction,
  relation: relationFunction(),
  contact: contactFunction
}
function validate(element){
  // see if the attribute being checked against has a matching entry in functionMap
  if(functionMap[element.data('value-type')] !== undefined){
    // call the function if it's there
    functionMap[element.data('value-type')];
  }
}

$(document).on('blur', '.validate', function(){
  validate($(this));
}
于 2013-01-22T15:37:35.387 に答える