Question

我正在尝试使用javascript创建一个简单表单的验证。 if语句中出现问题。即使我在语句中放置了if，只要有一个条件达到true，&&就会变为true。我将html和js一起给出如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
      <br><br>
    <div class="container">
        <form onsubmit="return validation(this);">
            <div class="form-row">
              <div class="form-group col-md-6">
                <label>Username</label>
                <input type="text" class="form-control" id="username" placeholder="Username">
              </div>
              <div class="form-group col-md-6">
                <label>City</label>
                <input type="text" class="form-control" id="city" placeholder="City">
              </div>
            </div>
            <div class="form-group">
              <label>Country</label>
              <input type="text" class="form-control" id="country" placeholder="Country">
            </div>
            <div class="form-group">
              <label>Age</label>
              <input type="text" class="form-control" id="age" placeholder="Age">
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <label>Email</label>
                <input type="email" class="form-control" id="email" placeholder="Email">
              </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script>
        function validation(form)
        {
            username = document.getElementById('username').value
            city = document.getElementById('city').value
            country = document.getElementById('country').value
            age = document.getElementById('age').value
            email = document.getElementById('email').value
            if(username == '' && city != 'Jaipur' && country != 'India' && age != '22' && email == '')
            {
                console.log('ERROR');
                return false;
            }
            else
            {alert('Submitted');}
        }
    </script>
  </body>
</html>

Answer 1

我相信您正在尝试检查陈述中的所有条件是否都正确。最好使用的运算符是OR ||运算符。因此它检查每个单独的陈述是对还是错。

下面是带有修复程序的代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Hello, world!</title>
  </head>
  <body>
      <br><br>
    <div class="container">
        <form onsubmit="return validation(this);">
            <div class="form-row">
              <div class="form-group col-md-6">
                <label>Username</label>
                <input type="text" class="form-control" id="username" placeholder="Username">
              </div>
              <div class="form-group col-md-6">
                <label>City</label>
                <input type="text" class="form-control" id="city" placeholder="City">
              </div>
            </div>
            <div class="form-group">
              <label>Country</label>
              <input type="text" class="form-control" id="country" placeholder="Country">
            </div>
            <div class="form-group">
              <label>Age</label>
              <input type="text" class="form-control" id="age" placeholder="Age">
            </div>
            <div class="form-row">
              <div class="form-group col-md-6">
                <label>Email</label>
                <input type="email" class="form-control" id="email" placeholder="Email">
              </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script>
        function validation(form)
        {
            username = document.getElementById('username').value;
            city = document.getElementById('city').value;
            country = document.getElementById('country').value;
            age = document.getElementById('age').value;
            email = document.getElementById('email').value;

            if(username === '' || city != 'Jaipur' || country != 'India' || age != '22' || email === '')
            {
                console.log('ERROR');
                return false;
            }
            else
            {alert('Submitted');}
        }
    </script>
  </body>
</html>

请告诉我这是否有帮助

为什么JavaScript验证无法正常工作？

1 个答案: