Question

我从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>

Answer 1

两件事，您需要防止默认的提交事件...

<form name="f2" id="myForm" onsubmit="event.preventDefault(); checkfields()">

注意..我还给您的表格提供了一个ID，供下一步使用...

我还从提交按钮中删除了onclick ...

<input type="Submit"value="Submit">

我修改了您的方法，以根据验证结果返回布尔值

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");
        return false;
      }

            return true;
    }

然后在checkfields方法中调用它，一旦成功，我将使用上面分配的ID提交表单...

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

  if(valform()){
    document.getElementById("myForm").submit();
  }
}

这里有一个JSFiddle，证明了上述内容。

注意：您遇到一个错误getElementByID应该是小写字母d（getElementById）

Answer 2

存在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中。我看不到给定代码中的任何额外功能

Answer 3

在您的valform()函数中，您需要传递event对象以防止提交表单，因为验证没有通过event.preventDefault()传递。另外，document.getElementByID应该是document.getElementById。

<html>
<title> Sign-Up </title>

<head>
  <style>
    body {
      background-color: lightblue;
    }
    
    input {
      height: 30px;
      widht: 100px;
    }
  </style>
  <script>
    function valform(e) {
      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");
        e.preventDefault();
      }

    }

    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;
      }
      return true;
    }
  </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(event)" value="Submit">
    </form>
  </center>
</body>

</html>

表单验证错误（初学者）

3 个答案: