在js中進行表單驗證

我正在驗證表單，我不確定是否使它比需要更復雜。我有一個變量，我比較的元素，然後成功取代IMG SRC檢查成功或X失敗。它應該運行我的validateData函數，一旦該領域未聚焦。這是js。當我通過輸入數字來觸發redx.png src變化來測試第一個字段時，我的img src src不會改變。在js中進行表單驗證

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>

來源

2016-11-28 Phlash6

什麼問題？你的HTML在哪裏？ –

@CarlMarkham img src在測試時不會改變，我不知道爲什麼。我已經更新它來添加我的HTML。 – Phlash6

每個輸入上都有兩個onblur =「」。你不應該用JS處理佔位符文本，使用placeholder =「Some Text」屬性。 – xCNPx

你不能只是簡單地設置action你的JS腳本，您將需要使用onsubmit事件處理程序。

<form onsubmit="validateData">

一旦提交表單這將觸發validateData方法。這不會執行，雖然像往常一樣停止形式，你需要停止在您的validateData方法，像這樣：

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

來源

2016-11-28 19:59:21

我有沒有辦法使用onblur在頁面上實時運行驗證？ – Phlash6

我有網站的單獨部分的提交按鈕，我不希望將其用於驗證，只是根據表單驗證中檢查的正確或錯誤輸入動態顯示img。 – Phlash6

這裏有多個問題;有些已被別人提及。其中一個主要問題是您有getElementsById而不是getElementById。如果您還沒有弄清楚如何拉開開發者控制檯並查看您遇到的錯誤，現在將是一個好時機。

表單驗證可能會變得非常複雜，通常我會使用一個庫來完成繁重的工作。你可以看看。

這是我猜你正在嘗試做的工作版本。這遠非最佳，但這正是我很快就能想出來的。

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

來源

2016-11-28 21:10:40 imjosh

感謝您的幫助，我會仔細看看我寫的是什麼來解決這個問題，作爲一個附註，我試圖把jsfiddle代碼放到我現有的.html和.js文件中進行測試，它確實運行就像它在jsfiddle中做的一樣，有什麼我失蹤了？ – Phlash6

我猜你的現有代碼中存在一個阻止JavaScript的錯誤。打開控制檯並觀察。 – imjosh

我檢查過，沒有任何東西在控制檯中，當我將它放在它工作的html頁面的腳本標記中，但是在我的本地機器上，卻沒有。可能與不上傳到現場網站有關。 – Phlash6

在js中進行表單驗證

回答

相關問題