Question

我有以下JS（使用jQuery）：

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来说。或者说的话，＆＃34;好！第一个表达式是真的，第二个表达式是假的 - 他没有输入用户名但输入了密码。让我们告诉他输入用户名。或者 - 他没有输入密码？告诉他输入密码。最后 - 他没有进入任何东西？好告诉他输入用户名和密码。

我知道我当前的代码会这样做，但我正在寻找一个更简单，更符合DRY的代码。

我对谷歌的研究没有提出任何解决方案，因此我要求stackoverflow。

谢谢。

Answer 1

您可以通过这种方式进行空检查。精确检查是否有空格修剪。

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

Answer 2

如果您只想使用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 3

只需循环播放所需字段并将消息添加到数据属性即可。这可以用于任何数量的字段而无需更改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>

Answer 4

为什么这么多条件？你可以这样做：

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

Answer 5

您可以使用else if(...)语句，例如：

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

JS - 看看＆＃34;或＆＃34;在if语句中评估为true

5 个答案: