Warum ist das Fenster [func] in JS nicht definiert?

Question

Ich schreibe ein Skript, das Formularfelder validiert. Die Formulareingabe verfügt über ein Datenvalidierungsattribut, das eine CSV mit verschiedenen Funktionen enthält. Ich durchlaufe alle Eingaben, die einen Datenvalidierungswert enthalten, teile diese Werte in ein Array ein und durchlaufe dieses Array, um die entsprechende Funktion aufzurufen. Mein Problem ist, dass window[func] undefiniert ist - ich bekomme "Kann nicht lesen Eigenschaft '' undefined" Nachricht anwenden. Was mache ich falsch? Hier ist ein jsFiddle

<input type="text" name="first_name" data-validate="min_length[4]"> 

(function($){ 
    var fields = []; 
    var i = 0; 
    $('[data-validate]').each(function(){ 
     var rules = $(this).data('validate').split("|"); 
     var label = $(this).parent().find('label').first(); 
     fields[i] = { 
       name: $(this).attr("name"), 
       label: label.text(), 
       rules: rules, 
       element: $(this) 
     } 
     i++; 
    }); 
    $.each(fields, function(key, field){ 
     field.element.on('focusout', function(){ 
      $.each(field.rules, function(key1, rule){ 
       if(rule.includes("[")){ 
        var rule = rule.match(/(.*?)\[(.*?)\]/); 
        func = rule[1]; 
        var len = rule[2]; 
        params = [field.element.val(), len]; 
       } else { 
        func = rule; 
        params = [field.element.val()]; 
       } 
       if(callFunc(func, params)){ 
        field.element.addClass('is-valid').removeClass('is-invalid'); 
       } else { 
        field.element.addClass('is-invalid').removeClass('is-valid'); 
       } 
      }); 
     }); 
    }); 
})(jQuery); 

function min_length(str, len){ 
    return str.length > len; 
} 
function callFunc (func, arguments){ 
    window[func].apply(null, Array.prototype.slice.call(arguments, 1)); 
} 

Answer 1

Ihre beiden Klassen Ich denke, ich habe es mit einigen Verbesserungen arbeiten lassen, überprüfen Sie es:

(function($){ 
 
    window.min_length = function(str, len) { 
 
\t return str.length > len; 
 
    } 
 
    function callFunc(func, arguments){ 
 
     return window[func](...arguments); 
 
    } 
 
\t var fields = []; 
 
\t $('[data-validate]').each(function(){ 
 
\t \t var rules = $(this).data('validate').split("|"); 
 
\t \t var label = $(this).parent().find('label').first(); 
 
\t \t fields.push({ 
 
\t \t \t \t name: $(this).attr("name"), 
 
\t \t \t \t label: label.text(), 
 
\t \t \t \t rules: rules, 
 
\t \t \t \t element: $(this) 
 
\t \t }); 
 

 
\t }); 
 

 
\t $.each(fields, function(key, field){ 
 
\t \t field.element.on('input', function(){ 
 
\t \t \t $.each(field.rules, function(key1, rule){ 
 
\t \t \t \t if(rule.includes("[")){ 
 
\t \t \t \t \t var rule = rule.match(/(.*?)\[(.*?)\]/); 
 
\t \t \t \t \t func = rule[1]; 
 
\t \t \t \t \t var len = rule[2]; 
 
\t \t \t \t \t params = [field.element.val(), len]; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t func = rule; 
 
\t \t \t \t \t params = [field.element.val()]; 
 
\t \t \t \t } 
 
\t \t \t \t if(callFunc(func, params)){ 
 
\t \t \t \t \t field.element.removeClass('is-invalid').addClass('is-valid'); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t field.element.removeClass('is-valid').addClass('is-invalid'); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t }); 
 
\t }); 
 
})(jQuery);

input { 
 
    outline: 0; 
 
} 
 
.is-valid { 
 
    border: 1px solid green; 
 
} 
 
.is-invalid { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="first_name" data-validate="min_length[4]">

Einige Fragen:

1. Sie das Ergebnis der Funktion callFunc(func, params) Anruf überprüfen, aber es gibt nichts, das heißt undefined, so dass Ihr Zustand ist immer false. Sie sollten das Ergebnis min_length() von callFunc() zurückgeben.
2. Ich fand 2 Klassen is-valid im css-Abschnitt des Snippets auf jsFiddle. Einer von ihnen sollte is-invalid sein.
3. Auch aufgrund einiger Schließung Probleme scheint, dass Ihre Funktion min_height wurde nicht zu einer Eigenschaft von window. Also, ich platzierte es in der IIFE und explizit hinzugefügt, um window, die funktioniert wegen der Verschlüsse, wieder.
4. Es besteht keine Notwendigkeit für i Variable - Sie können nur push() Objekte in Array.
5. Es ist auch möglich, ... Operator Aufruf min_length innerhalb callFunc statt dieser apply Sache zu verwenden.
6. Verwenden Sie input Ereignis statt focusout.

Answer 2

Im Hinblick auf die spezifischen Fehler Sie bekommen, ich bin nicht, dass überhaupt aus dem Code zu bekommen. Aber hier ist, was ich mit einigen Tests herausgefunden (und fest):

1) Sie müssen den Wert der Funktion return Sie in callFunc nennen sonst werden Sie nur undefined erhalten. Außerdem geben Sie nicht die richtige Anzahl von Argumenten ein.

return window[func].apply(null, Array.prototype.slice.call(arguments)); 

2) Sie benötigen len Parameter auf eine Nummer aus einer Zeichenfolge konvertieren:

return str.length > Number(len); 

3) genannt werden is-valid :)

Here's the full working code.