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]();

Answer 2

你有这个：

var callback = field.attr('data-callback');

将其扩展为：

// check if the value is a function in the global scope

if('function' == typeof(window[callback])) {
 callback();
}

如果函数不在全局范围内，则可能需要修改该逻辑。

修改

如果您在本地范围内工作，您可能会受益于添加通用验证功能，例如：

(function($){ $.fn.form_validation=function(){ var rules = { callback_one: function(fieldvalue) { var response = { 'code':'failed', 'reason':'Missing or incomplete' }; //some validation here return response; }, ... } var rule = '', args = []; if(arguments.length > 0) { if('object' === typeof(arguments[0])) { args = arguments; } else if('undefined' !== typeof(rules[arguments[0]])) { args = Array.prototype.slice.call(arguments); args.shift(); rule = arguments[0]; } } rules[ rule ].apply( this, args ); } }($));

然后你可以打电话给：

var result = $.form_validation(callback,data);

在$.each()
中
注意：未经测试 - 只是将您的代码分离为可控模块的起点，而不是将其全部内联，以防您需要重复使用验证或内联编辑代码。

执行element属性中定义的回调

2 个答案: