0

在阅读了有关如何制作 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();，其余的事情应该由它来处理。

4

2 回答 2

2

请参阅下面代码中我使用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;       
}
于 2012-12-23T09:21:23.463 回答
0

当您调用 $.border 函数时，您是否尝试过重置 cnt 变量？

于 2012-12-23T09:24:03.497 回答