Question

在完成了如何制作jQuery插件的教程后，我决定试一试并制作一个表单验证插件。到目前为止，我已经设法实现了我希望的90％，并且唯一剩下的就是如果找到空字段，则使表单返回false。

我已将整个代码放在jsfiddle上，但似乎没有用。也许是因为我需要包含我的插件文件而不是在脚本部分粘贴它。但我正在分享它，以防您需要查看整个代码。

PLUGIN WORKFLOW

(function(jQuery) {
    window.cnt = 0;

    jQuery.fn.border = function() {

       this.each(function() {
        var ele = jQuery(this);
        var cur_val, ele_name;
        if(// element is input, select, or textarea)
        {
           cur_val = ele.val();
        }
        else if(// element is radio)
        {
           ele_name = ele.attr('name');
           cur_val = $('input:radio[name="'+ele_name+'"]:checked').val();
        }
        else if(// element is checkbox)
        {
           ele_name = ele.attr('name');
          cur_val = $('input:checkbox[name="'+ele_name+'"]:checked').val();
        }

        if(! cur_val) // need to do something here to prevent form submission
        {
            cnt++;
            if(// input, textarea, select element)
            {
               ele.addClass('border');
            }
            else if(// radio or checkbox element)
            {
               ele.parent().addClass('border');
            }               
        }
        else // need to do something here to make the form submission happen
        {               
            if(// input, select, textarea)
            {
                ele.removeClass('border');
            }
            else if(radio or checkbox)
            {
                ele.parent().removeClass('border');
            }
        }

        });         
        return this;            
    };
})(jQuery);// JavaScript Document

我做了什么

<script type="text/javascript">
    $(function(){
        $('form').submit(function(){
            $('.required').border();
            if(window.cnt > 0)
            {               
                return false;
            }
            else
            {               
                return true;
            }
        });
    });
</script>

我创建了一个全局变量cnt并尝试在表单提交功能中使用它。当有空元素时它起作用，但即使在填满所有元素之后它也返回false。在提醒cnt的值后，我发现每个按钮上都会点击cnt的值继续保留其之前的值，因此cnt > 0始终返回true。

因此，我试图找到一种从插件函数本身返回false的方法，这样我就不必在调用插件函数后添加if-else条件。

简而言之，我想要实现的是

$(function(){
    $('form').submit(function(){
        $('.required').border(); // this line should take care of returning true or false for the submit function           
    });
});

因此，用户应该只是致电$('.required').border();，它应该处理剩下的事情。

Answer 1

请参阅下面代码中我使用valid变量的方式，而不是window.cnt。

jQuery.fn.border = function() {

   var valid = true;

   this.each(function() {
    var ele = jQuery(this);
    var cur_val, ele_name;
    if(// element is input, select, or textarea)
    {
       cur_val = ele.val();
    }
    else if(// element is radio)
    {
       ele_name = ele.attr('name');
       cur_val = $('input:radio[name="'+ele_name+'"]:checked').val();
    }
    else if(// element is checkbox)
    {
       ele_name = ele.attr('name');
      cur_val = $('input:checkbox[name="'+ele_name+'"]:checked').val();
    }

    if(! cur_val) // need to do something here to prevent form submission
    {
        valid = false;
        if(// input, textarea, select element)
        {
           ele.addClass('border');
        }
        else if(// radio or checkbox element)
        {
           ele.parent().addClass('border');
        }               
    }
    else // need to do something here to make the form submission happen
    {               
        if(// input, select, textarea)
        {
            ele.removeClass('border');
        }
        else if(radio or checkbox)
        {
            ele.parent().removeClass('border');
        }
    }

    });
    return valid;       
}

Answer 2

当你调用$ .border函数时，你试过重置cnt变量吗？

jQuery Form Validation Plugin：错误时返回false

PLUGIN WORKFLOW

我做了什么

2 个答案: