javascript - 执行元素属性中定义的回调

Question

我试图将表单验证脚本放在一起，但当我想在我的验证规则中使用回调函数时遇到了障碍。验证规则使用数据属性在 html 中定义这里是 html

<div class="clearfix">
                    <input type="text" name="first_name" placeholder="First Name" id="_fname" data-required='yes' />
                    <span class="form-validation-status"></span>
                    <div class="form-error-msg"></div>
               </div>
               <div class="clearfix">
                    <input type="text" name="last_name" placeholder="Last Name" id="_lname" data-required='yes' />
                    <span class="form-validation-status"></span>
                    <div class="form-error-msg"></div>
               </div>
               <div class="clearfix">
                    <input type="text" name="email" 
                         placeholder="Email Address" id="_email"
                         data-required='yes' data-has-callback="yes"
                         data-callback="email_check" 
                     />
                    <span class="form-validation-status"></span>
                    <div class="form-error-msg"></div>
               </div>

               <div class="clearfix">
                    <input type="text" name="username" 
                        placeholder="Username" id="_username" 
                        data-required='yes' data-has-callback="yes"
                        data-callback="username_check" 
                    />
                    <span class="form-validation-status"></span>
                    <div class="form-error-msg"></div>
               </div>
               <div class="clearfix">
                    <input type="password" name="password" placeholder="Password" id="_password" data-required='yes'/>
                    <span class="form-validation-status"></span>
                    <div class="form-error-msg"></div>
               </div>
               <div class="clearfix">
                    <input type="password" name="confpass" placeholder="Confirm Password" id="_confpass" data-required='yes' />
                    <span class="form-validation-status"></span>
                    <div class="form-error-msg"></div>
               </div>
               <div class="clearfix">
                    <input type="submit" value="Sign Up" class="btn btn-large btn-primary" id="signup-btn" />
               </div>

我已经能够处理所需的规则，但我似乎无法弄清楚要为回调做什么，这是 javascript

var required_fields = $("input[data-required='yes']");
        var has_callbac =$("input[data-has-callback='yes']");

        /* VALIDATE REQUIRED FIELDS */
        $.each(required_fields,function(index,item){
            var field = $(item);
            var status = field.next();
            var field_name = field.attr("placeholder");
            var error_msg = "The "+field_name+" cannot be empty";
            var form_error = field.siblings('span.form-validation-status').next();
            field.blur(function() {
                var _field_val = ($(this).val());
                form_error.html('');
                status.removeClass('error-status');
                if(_field_val == ""){
                    validation_errors++;
                    status.addClass('error-status');
                    form_error.html(error_msg);
                }else {
                    status.addClass('ok-status');
                    validation_errors= validation_errors + 1 - 2;
                }
            });
        });

        /* VALIDATE FIELDS WITH CALLBACKS */
        $.each(has_callbac,function(index,item) {
            var field = $(item);
            var status = field.next();
            var form_error = field.siblings('span.form-validation-status').next();
            var callback = field.attr("data-callback");
            var callback_func = callback+"()";
            var test = typeof callback_func;
                    //i got confused at this point
            console.log(test);
        });

请帮帮我。

Answer 1

如果这些回调函数是全局的，你可以简单地做:

var callback = field.attr("data-callback");
window[callback]();

或者，如果您的回调希望将有问题的字段设置为 this 值，那么您可以:

var callback = field.attr("data-callback");
window[callback].call(field); //and of course tack on any other parameters you have

---

如果您已将这些回调定义为某个其他对象的属性，那么您会做同样的事情:

var callbackHolder = {
    callback1: function() { },
    callback2: function() { }
};

var callback = field.attr("data-callback");
callbackHolder[callback]();