JS - 私は（jQueryを使って）以下のJSを持っている「または」声明

Question

場合に真の評価を参照してください：

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のためです。または、「良い！最初の式は真で2番目の式は間違っていた - 彼はユーザー名を入力しなかったが、パスワードを入力した。ユーザー名を入力するように教えよう。パスワードを入力するように教えてください。最後に彼は何も入力しませんでしたか？ユーザー名とパスワードを入力するように教えてください。

私は現在のコードはが、私は単純に、よりDRY準拠のコードを探していますことを行う。

Googleで私の研究は、いずれかの解決策を考え出すていないので、私はstackoverflowのを求めています。

ありがとうございます。

Answer 1

をあなただけ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; 
} 

あなたが複数のフィールドを持っている場合は、さらにループを一般化することができます

しかし、本当にあなたは、配列を使用するコードを削減します。

Answer 2

このように空のチェックを行うだけで済みます。空白のトリムもチェックするのが正確です。

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

Answer 3

なぜそんなに多くの条件がありますか？あなたはこのようにそれを行うことができます：

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

Answer 4

あなたはステートメントを使用することができ、のようなもの：

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. 
} 

Answer 5

必要なフィールドをループし、メッセージをデータ属性に追加するだけです。 JSコードを変更せずに任意の数のフィールドに使用できます。あなたは（https://jqueryvalidation.org/）にjqueryのバリデータのプラグインを使用することができます

$(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>