javascript - jQuery 表单验证插件 : Return false on error

Question

在学习了如何制作 jQuery 插件的教程后，我决定尝试一下并制作一个表单验证插件。到目前为止，我已经实现了 90% 的期望，唯一剩下的就是在找到空字段时使表单返回 false。

JSFIDDLE

我已将整个代码放在 jsfiddle 中，但它似乎不起作用。也许是因为我需要包含我的插件文件而不是将其粘贴到脚本部分。但我分享它是为了以防万一您需要查看整个代码。

插件工作流程

(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;       
}