Question

我正在努力验证表格我不确定我是否使它变得比它需要的更复杂。我有一个变量，我正在比较元素，然后成功替换img src与成功检查或失败的x。一旦字段未聚焦，它应该运行我的validateData函数。这是js。当我通过输入数字来触发redx.png src更改来测试第一个字段时，我的img src src没有改变。

function validateData() {
  var letters = /^[A-Za-z]+$/;
  var image1=document.getElementsById("image1");

  if (document.forms["quiz_form"]["last_name"].value.match(letters) && document.forms["quiz_form"]["last_name"].value!="")
  {
    image1.src="check.png";
  }
  else{
    image1.src="redx.png";
  }

}

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta name="author" content="Kenneth Dunn" />
    <meta name="description" content="" />
    <script src="quiz.js"></script>
    <link rel="stylesheet" href="quiz.css" type="text/css" />
  </head>
  <body>
    <div id="page">
      <div id="logo">
        <h1><a href="https://playoverwatch.com">Overwatch</a></h1>
      </div>
      <div id="content">
        <h2>Overwatch Quiz</h2>
        <p>
          Hi there!
          This quiz is dedicated to one of my favorite games Overwatch! 
        </p>
        <form action="quiz.js" method="post" name="quiz_form">
          <p><br>
            <input name "first_name" type="text" placeholder="First Name"   onblur="this.placeholder='First Name'" onfocus="this.placeholder='Use only letters'" onblur="validateData()"/>
            <img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image1" class="image1"/>
          </p>

          <p><br>
            <input name="last_name" type="text" placeholder="Last Name"  onblur="this.placeholder='Last Name'" onfocus="this.placeholder='Use only Letters'" onblur="validateData()" />
            <img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image2" class="image2"/>
          </p>

          <p><br>
            <input name="email" type="text" placeholder="Email"  onblur="this.placeholder='Email'" onfocus="this.placeholder='Must contain @ '" onblur="validateData()"/>
            <img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image3" class="image3"/>
          </p>

          <p><br>
            <input name="number" type="text" placeholder="Phone Number" onblur="this.placeholder='Phone Number'" onfocus="this.placeholder='Must follow xxx-xxx-xxx '" onblur="validateData()" />
            <img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image4" class="image4"/>
          </p>

          <p><br>
            <input name="sulley" type="text" placeholder="Sulley Email" onblur="this.placeholder='Sulley Email Address'" onfocus="this.placeholder='Must contain ~ and https:// '" onblur="validateData()" />
            <img src='http://www.q-park.ie/Portals/8/images/search-icon.png' id="image5" class="image5"/>
          </p>
          <br>
          <br>
          <p>

          <h2>Find out which Overwatch character you are most like!</h2>

          <p>If you could pick what form to take in a fictional universe with magic and cool science what would you want to be?</p>

          <input type="radio" name="exist" value="1">Male(Human).<br>
          <input type="radio" name="exist" value="2">Female(Human).<br>
          <input type="radio" name="exist" value="3">An Animal or something crazy.

          <p>What is your preferred weapon to take on bad guys and defend yourself?</p>

          <input type="radio" name="weapon" value="1">Twin Shotguns for close range.<br>
          <input type="radio" name="weapon" value="2">Twin pistols medium range.<br>
          <input type="radio" name="weapon" value="3">An electro gun that schocks enemies into submission.

          <p>Which motivations most align with your own?<p>

          <input type="radio" name="idea" value="1">To become more powerful and to defeat those who would oppose me.<br>
          <input type="radio" name="idea" value="2">To explore the world and discover the unknown.<br>
          <input type="radio" name="idea" value="3">To protect my friends and those I care about.

          <p>What do you look like?</p>

          <input type="radio" name="look" value="1">Dark and mysterious black-hooded figure ,very edgy, like people in the Matix.<br>
          <input type="radio" name="look" value="2">Short and spunky British airforce pilot who can travel back in time.<br>
          <input type="radio" name="look" value="3">I'm a large gorilla who likes to eat bananas and peanut butter and can sheild my friends from harm. 

          <br>
          <br>
          <input type="submit" name="submit" id="submit" value="submit" />
          <input type="reset" name="reset" id="reset" value="Reset" />
          </p>
        </form>
      <br>
      <br>
      <br>
      <br>

      <div id="footer">
        <h2 align="center" >Created by </h2>
        </p>
    </div>
    </div>
  </div>
</body>
</html>

Answer 1

您不能简单地将action设置为JS脚本，您需要使用onsubmit事件处理程序。

<form onsubmit="validateData">

一旦提交表单，这将触发validateData方法。这不会阻止表单像往常一样执行，但您需要在validateData方法中将其停止，如下所示：

function validateData (event) {
  // prevent the form from actually submitting
  event.preventDefault();
}

Answer 2

这里有很多问题;其他人已经提到了一些。其中一个主要问题是您getElementsById而不是getElementById。如果您还没有弄清楚如何启动开发者控制台并查看您正在获得的错误，那么现在是个好时机。

表格验证会变得非常复杂，通常我会使用一个可以解决繁重问题的库。你可能会调查一下。

这是我猜你正在尝试做的工作版本。这远非最佳，但这是我很快能想到的。

https://jsfiddle.net/ec2L08vf/1/

js中的表单验证

2 个答案: