JS - 在其中看到「或」評估真正的if語句

我有以下的JS（使用jQuery）：JS - 在其中看到「或」評估真正的if語句

if ($('#username').val() === '' || $('#password').val() === '') { 
    return; 
} 
$.ajax(); //run an ajax call to the server for password verif (this would have proper ajax code).

這句話的意思是：如果用戶名（#username）和密碼（#password）場均空白，然後返回。

如果是這種情況，我想給用戶一條消息。例如：

if ($('#username').val() === '' || $('#password').val() === '') { 
    if ($('#username').val() === '' && $('#password').val() !== '') { 
    alert('Please enter a username'); 
    return; 
    } 
    if ($('#username').val() !== '' && $('#password').val() === '') { 
    alert('Please enter a password'); 
    return; 
    } 
    alert('Username and password fields cannot be blank'); 
}

但是，這是很多代碼。我正在尋找類似於XOR/^operator（來自SQL），但是用於JS。或者說，「好！第一個表達是真實的，第二個表達是錯誤的 - 他沒有輸入用戶名，而是輸入了密碼，讓我們告訴他輸入用戶名，或者 - 他沒有輸入輸入密碼？告訴他輸入密碼。最後 - 他沒有輸入什麼？告訴他輸入用戶名和密碼。

我知道當前的代碼我會做到這一點，但我要尋找一個更簡單，更DRY符合的代碼。

我對谷歌的研究還沒有拿出任何解決方案，因此我要求計算器。

謝謝。

來源

2016-08-25 4lackof

您可以在（https://jqueryvalidation.org/）使用jquery驗證插件。 –

我看不到一些「優雅」的做法。你可以使用一些驗證器，但內部我懷疑它使用不同的方法。你只需要檢查每個字段，如「if（$（'＃username'）。val（）===''）附加一些文本; hasErrors = true;'並使用某種標誌，例如'hasErrors'，默認值爲'false'，因此最後可以添加一些邏輯，比如if（hasErrors）...執行其他操作。 else'。 – Leron

'！='實際上是使用數組的異或運算符 – wvdz

如果你只想使用if語句，可以簡化代碼

var usernameMissing = $('#username').val() === ''; 
var passwordMissing = $('#password').val() === ''; 
if (usernameMissing || passwordMissing) { 
    if (usernameMissing && !passwordMissing) { 
     alert('Please enter a username'); 
    } else if (!usernameMissing && passwordMissing) { 
     alert('Please enter a password'); 
    } else { 
     alert('Username and password fields cannot be blank'); 
    } 
    return; 
}

或

var usernameMissing = $('#username').val() === ''; 
var passwordMissing = $('#password').val() === ''; 
if (usernameMissing && !passwordMissing) { 
    alert('Please enter a username'); 
    return; 
} 
if (!usernameMissing && passwordMissing) { 
    alert('Please enter a password'); 
    return; 
} 
if (usernameMissing || passwordMissing) { 
    alert('Username and password fields cannot be blank'); 
    return; 
}

然而，要真正減少對你的代碼將使用數組：

var missing = []; 
if ($('#username').val() === '') { 
    missing.push("username"); 
} 
if ($('#password').val() === '') { 
    missing.push("password"); 
} 
if (missing.length > 0) { 
    alert("Please enter "+missing.join(" and ")+"!"); 
    return; 
}

，你可以進一步與環一概而論，如果你有更多的領域。

來源

2016-08-25 07:02:55 Bergi

+1，我比使用標誌更喜歡它。 'wvdz'我認爲OP正在詢問編輯提供的內容。 – Leron

return vs else。不需要別的。 –

@NinaScholz：對，我修好了。實際上這是兩個解決方案。 – Bergi

您可以簡單地通過這種方式進行空檢查。精確的做法是檢查一下是否有空白。

if (!$('#username').val()) { 
    alert('Please enter a username'); 
    return; 
    } 
    if (!$('#password').val()) { 
    alert('Please enter a password'); 
    return; 
    }

來源

2016-08-25 07:00:36

爲什麼這麼多條件？你可以做這樣的：

if ($('#username').val() === '') { 
    alert('Please enter a username'); 
    return; 
} else if ($('#password').val() === '') { 
    alert('Please enter a password'); 
    return; 
}

來源

2016-08-25 07:02:21 Shubham

您可以使用語句，是這樣的：

if ($('#username').val() === '' && $('#password').val() === '') { 
    alert('Username and password fields cannot be blank'); 
}else if($('#username').val() === ''){ 
    alert('Please enter a username'); 
}else if($('#password').val() === ''){ 
    alert('Please enter a password'); 
}else{ 
    // All Good. 
}

來源

2016-08-25 07:02:28 Titus

只需循環您的必填字段並將消息添加到數據屬性。這可以用於任何數量的字段而不用更改JS代碼。

$(document).ready(function() { 
 
    $(document).on('submit', 'form', function() { 
 
    var valid = true; 
 
    $('label.required').css({ 
 
     'border-color': 'grey' 
 
    }).find('.error').remove(); 
 

 
    $('label.required').each(function() { 
 
     if (!$(this).find('input').val().length) { 
 
     valid = false; 
 

 
     $(this) 
 
      .css({ 
 
      border: '1px solid red' 
 
      }) 
 
      .append('<div class="error">' + $(this).data('msg') + '</div>'); 
 
     } 
 
    }); 
 

 
    return valid; 
 
    }) 
 
});

label { 
 
    border: 1px solid grey; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label class='required' data-msg="You must enter username"> 
 
    Username: 
 
    <input type="text" id="username" /> 
 
    </label> 
 
    <label class='required' data-msg="Password can not be empty"> 
 
    Password: 
 
    <input type="password" id="password" /> 
 
    </label> 
 
    <button>Login</button> 
 
</form>

來源

2016-08-25 07:07:37 Justinas

JS - 在其中看到 「或」 評估真正的if語句

回答

相關問題

JS - 在其中看到「或」評估真正的if語句