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

Question

我正在尝试使用 javascript 为 html 中的简单表单创建验证。 问题发生在if语句中。 该if当任何一个条件得到越来越真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 个解决方案

解决方案1
0 已采纳 2020-03-11 12:28:21

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-03-11 12:28:21

解决方案1
0 已采纳 2020-03-11 12:28:21