JavaScript 中的文本验证错误

代码没有按照我想要的方式工作。我编写此代码是为了在未填写登录或密码字段时显示警报。但是，如果我填写登录信息并跳过密码，它不会按计划显示警报消息。任何帮助将不胜感激。

function check() {
  var x = document.forms['myform']['lid'].value;
  if (x == "") {
    alert("Please Enter the Login-Id")
    y = document.forms['myform']['pass'].value;
    if (y == "") {
      alert("The password field can't be blank")
    }
  }
}

body {
  background-color: lightblue;
  margin-left: 100px;
  margin-right: 100px;
}

<center>
  <h1> Welcome to X-mail.com </h1><br><br><br>
  <form name='myform'>
    Login-Id<input type="text" name='lid'> </input><br><br> Password
    <input type='password' name='pass'> </input><br><br><br>
    <button onclick="check()"> Login</button>
  </form>
  Don't have an account?
  <a href="signup.html"> Sign-Up </a>
</center>

你只是把两个支票嵌套在一起。它们需要像这样分开：

function check() {
    var x = document.forms['myform']['lid'].value;
    if (x == "") {
        alert("Please Enter the Login-Id")
    }
    y = document.forms['myform']['pass'].value;
    if (y == "") {
        alert("The password field can't be blank")
    }
}

理想情况下，您要检查两者是否都丢失并且仅显示一个警报，但我会留给您自己解决。

您的检查函数逻辑似乎是嵌套的，这就是问题所在。正确的逻辑需要

function check() {
            var x = document.forms['myform']['lid'].value;
            if (x == "") {
                alert("Please Enter the Login-Id")   
            }
            y = document.forms['myform']['pass'].value;
            if (y == "") {
                alert("The password field can't be blank")
            }
        }

您在第一个if语句后缺少一个右括号。

if (x==""){
alert("Please Enter the Login-Id")
} // make sure you close your bracket here
y=document.forms['myform']['pass'].value;
... rest of your code ...

如果你这样做并且有两个if，你应该很高兴。

问题是，仅当lid字段等于 "" 时，才会对pass字段进行验证。将pass字段的验证移到登录 ID 字段的验证之外。

function check() {
  var x = document.forms['myform']['lid'].value;
  if (x == "") {
    alert("Please Enter the Login-Id")
  }
  y = document.forms['myform']['pass'].value;
    if (y == "") {
      alert("The password field can't be blank")
    }
}

body {
  background-color: lightblue;
  margin-left: 100px;
  margin-right: 100px;
}

<center>
  <h1> Welcome to X-mail.com </h1><br><br><br>
  <form name='myform'>
    Login-Id<input type="text" name='lid'> </input><br><br> Password
    <input type='password' name='pass'> </input><br><br><br>
    <button onclick="check()"> Login</button>
  </form>
  Don't have an account?
  <a href="signup.html"> Sign-Up </a>
</center>

此外，您可能希望将 event 对象传递到函数中，以防止在验证未通过时event.preventDefault()默认操作(提交表单(。

function check(e) {
  var x = document.forms['myform']['lid'].value;
  if (x == "") {
    alert("Please Enter the Login-Id");
    e.preventDefault();
  }
  y = document.forms['myform']['pass'].value;
    if (y == "") {
      alert("The password field can't be blank");
      e.preventDefault();
    }
}

body {
  background-color: lightblue;
  margin-left: 100px;
  margin-right: 100px;
}

<center>
  <h1> Welcome to X-mail.com </h1><br><br><br>
  <form name='myform'>
    Login-Id<input type="text" name='lid'> </input><br><br> Password
    <input type='password' name='pass'> </input><br><br><br>
    <button onclick="check(event)"> Login</button>
  </form>
  Don't have an account?
  <a href="signup.html"> Sign-Up </a>
</center>

相关内容

最新更新

热门标签：