【问题标题】:Shorten up Jquery condition缩短Jquery条件
【发布时间】:2009-11-14 14:06:08
【问题描述】:

我有一个关于如何缩短 Jquery if 语句的问题。在我的表格中,我有几个字段可以检查它们是否已填写。我知道有几个插件可以为我做到这一点,但我不想自己学习(在其他人的帮助下;-))

我收到了这张支票

//---- First define hasError
var hasError = false;
//---- Get the value from the inputfield
var firstname = $('#firstname').val();
//---- Do the check
if(firstname == ''){
 $("#error_firstname").show();
 hasError = true;
}else{
 $("#error_firstname").hide();
}

我想我可以这样写:

(firstname == '') ? $(".firstname").show(): $(".firstname").hide();

而且这行得通,但是我不能把 hasError=true 放进去,所以我最后也不能问这个

if(hasError != false) {
 //---- if error, don't refresh page and show errors
 return false;
}else{
 //---- Save values to DB and show succes message
}

有人有想法吗?

提前发送

Grtzz

维姆

【问题讨论】:

    标签: javascript jquery validation optimization


    【解决方案1】:

    首先,将其重构为一个函数,以便您可以将其重用于所有字段。

    例子:

    function check(fieldname) {
        var value = $('#' + fieldname).val();
        var error = $('#error_' + fieldname);
        if (value == '') {
            error.show();
            $.hasError = true;
        } else {
            error.hide();
        }
    }
    

    以便您可以按如下方式使用它:

    check('firstname');
    check('lastname');
    // etc..
    

    当然,您可以通过将所有名称存储在一个数组中或仅通过获取$(':input') 并在循环中调用check() 来进一步重构它。你一直忙于重构;)你最终可以看看现有的表单验证插件是如何做到的。例如jQuery Validator

    重点是:不要重复代码。重构它。

    【讨论】:

    • +1 用于包含指向 jQuery 验证插件的链接。使用这个插件(如果可能的话)将是明智的选择。
    • 嗨 BalusC,tnx 为您解答。你让我开始思考我想如何设置我的验证。我想我走你的路!!!!
    • @tvanfosson:我知道使用插件可能更聪明。但是如果我总是使用插件,我不会学习如何编写自己的代码 ;-)
    • @Wim Selles -- 相信我,你会发现很多机会来编写自己的代码:事件处理程序、扩展插件——比如使用自定义验证规则等。无需复制一个优秀的,已经存在的插件,除非您只是将其作为学习练习。
    【解决方案2】:

    好吧,我会建议您使用JQuery Validation 插件,但我认为您想以“硬”的方式学习它。 :P

    让错误消息采用相同的类,例如“错误”

    <span class="error" id="err_firstname">...</span>
    <span class="error" id="err_lastname">...</span>
    <span class="error" id="err_email">...</span>
    

    如果span.error:visible 中的任何一个具有至少一项,则hasError = true

     $("span.error:visible").each(function (i) {
        hasError = true;
        return;
      });
    

    hasError 标志检查也可以缩短:

    if(hasError) {
    
     //---- if error, don't refresh page and show errors
    
     return false;
    }
    else {
    
     //---- Save values to DB and show succes message
    
    }
    

    【讨论】:

    • 我知道使用插件可能更聪明。但是如果我总是使用插件,我不会学习如何编写自己的代码 ;-)
    【解决方案3】:

    您可以为 jQuery show()hide() 方法设置回调:

    (firstname == '') ? $(".firstname").show(function(){ hasError = true; }): $(".firstname").hide();
    

    【讨论】:

    • 您好 Rochal Tnx 的快速回答,我会尝试您的回答,但 BalusC 让我开始思考,我想我会寻求他的回答。但是再次tnx!
    猜你喜欢
    • 2016-09-25
    • 2023-04-09
    • 1970-01-01
    • 2015-11-18
    • 1970-01-01
    • 2022-01-17
    • 2011-08-20
    • 2013-07-15
    • 2017-09-10
    相关资源
    最近更新 更多