jQuery表单验证插件:错误时返回false

jQuery Form Validation Plugin : Return false on error

本文关键字:返回 false 错误 表单 验证 插件 jQuery      更新时间:2023-09-26

在学习了如何制作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

WHAT I TRIED

<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();,它应该负责其余的。

看看我在下面的代码中使用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;       
}

您是否尝试在调用$时重置cnt变量?边界函数?