Question

我正在尝试对这两个字段的电子邮件和名称进行验证，但只有电子邮件正在验证，而且它没有检查名称字段。我无法找到代码中的错误。

<html>
<body>
  <form name="myForm">
    Email: <input type="text" name="email" id="email2">
    <br>
    Name: <input type="text" name=" fname">
    <button type="submit" name="submit" onclick="validateForm()">submit</button>
    <br> email
    <div id="email1"></div>
  </form>
</body>
<script>
  function validateForm() {
    var x = document.forms["myForm"]["email"].value;

    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
      alert("Not a valid e-mail address");
      return false;
    }

    var email1 = document.getElementById("email2").value;

    document.getElementById("email1").innerHTML=email1;

    var y = document.forms["myForm"]["fname"].value;
    if (y==null ||y=="") {
      alert("name must be filled");
      return false;    
    }
  }
</script>
</html>

Answer 1

您错过了为姓名提供ID：<input type="text" name=" fname">将ID分配给Name: <input type="text" name=" fname" id="fname">。

作为document.forms["myForm"]["fname"].value;，这需要元素ID来获取值。

Answer 2

<input type="text" name=" fname">

fname之前有一个空格。这就是它无法正常工作的原因。您可以尝试这样的简单解决方案

Answer 3

添加额外的布尔值以检查验证

function validateForm() {
    var x = document.forms["myForm"]["email"].value;
    //Additional boolean
    var success = true;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
        alert("Not a valid e-mail address");
        success = false;
    }
   var email1= document.getElementById("email2").value;
       document.getElementById("email1").innerHTML=email1;

     var y = document.forms["myForm"]["fname"].value;
        if (y==null ||y=="") {
            alert("name must be filled");
            success = false;

    }
    return success;
    }

使用java脚本验证

3 个答案: