时间戳

首页 > 解决方案 > 表单验证错误（初学者）

javascript - 表单验证错误（初学者）

问题描述

我从 JavaScript 开始。我刚刚为表单验证编写了代码，但 checkfields() 函数不起作用。我试图找到错误，但多次尝试后无法发现它。如果有人可以指出错误，那将非常有帮助。

<html>
<title> Sign-Up </title>

<head>
  <style>
    body {
      background-color: lightblue;
    }
    
    input {
      height: 30px;
      widht: 100px;
    }
  </style>
  <script>
    function valform() {
      var x = document.forms["f2"]["fn"].value;
      var y = document.forms["f2"]["ln"].value;
      var z = document.forms["f2"]["eid"].value;
      var a = document.forms["f2"]["pass"].value;
      var b = document.forms["f2"]["cpass"].value;
      if (x == "" || y == "" || z == "" || a == "" || b == "") {
        alert("Please fill the form completely");
      }

    }

    function checkfields() {
      var p1 = document.forms["f2"]["pass"].value;
      var p2 = document.forms["f2"]["cpass"].value;
      if (p1 != p2) {
        document.getElementByID("message").innerHTML = "Password Doesn't match";
        return false;
      }
    }
  </script>
</head>

<body>
  <center>
    <h1> Sign-Up </h1>
    <form name="f2" onsubmit="return checkfields()">
      First-Name: <input type="text" name="fn"> Last-Name :<input type="text" name="ln"><br><br><br> Email-Id:
      <input type="text" name="eid"><br><br><br> Password:
      <input type="password" name="pass"><br><br><br> Confirm-Password
      <input type="password" name="cpass">
      <span id='message'></span>
      <br><br><br>
      <input type="Submit" onclick="valform()" value="Submit">
    </form>
  </center>
</body>

</html>

标签： javascript

解决方案

有js错误，getElementByID应该是getElementById

我还修改了下面的验证方式

您不需要提交上的点击处理程序，返回就足够了onsubmit。

Onsubmit 调用valform，所有验证都在其中完成。由于您已经有一个checkfields函数，您可以简单地在验证函数中调用它。

如果表单不完整，您还需要返回 false ，否则无论如何它都会提交。document.forms["f2"]您也可以通过缓存到变量中来使代码更简洁

您在 css 中也有错字widht: 100px;

// saving form into a variable to make it a bit cleaner below
var form_f2 = document.forms["f2"];

function checkfields() {
  var p1 = form_f2["pass"].value;
  var p2 = form_f2["cpass"].value;
  
  if (p1 != p2) {
    document.getElementById("message").innerHTML = "Password Doesn't match";
    return false;
  }
}

function valform() {

  var x = form_f2["fn"].value;
  var y = form_f2["ln"].value;
  var z = form_f2["eid"].value;
  var a = form_f2["pass"].value;
  var b = form_f2["cpass"].value;

  // call to check passwords
  checkfields();

  if (x == "" || y == "" || z == "" || a == "" || b == "") {
    alert("Please fill the form completely");
    // need to return false due to incomplete form
    return false;
  }

}
body {
  background-color: lightblue;
}

input {
  height: 30px;
  width: 100px;
}
<center>
  <h1> Sign-Up </h1>
  <form name="f2" onsubmit="return valform()">
    First-Name: <input type="text" name="fn"> Last-Name :<input type="text" name="ln"><br><br><br> Email-Id:
    <input type="text" name="eid"><br><br><br> Password:
    <input type="password" name="pass"><br><br><br> Confirm-Password
    <input type="password" name="cpass">
    <span id='message'></span>
    <br><br><br>
    <input type="Submit" value="Submit">
  </form>
</center>

您实际上可以将checkfields功能内容组合到valform. 我认为给定代码中不需要额外的功能

推荐阅读