JavaScript中的學生註冊表單驗證

我一直在研究JavaScript中的學生註冊表單驗證，但它根本不起作用。我甚至嘗試編寫各種日誌語句進行調試，但似乎函數根本沒有被調用（？）。JavaScript中的學生註冊表單驗證

如果你們可以讓我知道我在哪裏出錯，這將是有益的。下面是代碼：

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
\t <head> 
 
\t \t <script type="text/javascript"> 
 
\t \t \t function allLetter() { 
 
\t \t \t \t var name = document.querySelector("#name").value; 
 

 
\t \t \t \t var letters = /^[A-Za-z]*$/; 
 
\t \t \t \t if (name.test(letters)) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t alert("Not a valid Name"); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t function rollnumber() { 
 
\t \t \t \t var roll = document.querySelector("#roll").value; 
 

 
\t \t \t \t var phoneno = /^\d{7}$/; 
 
\t \t \t \t if (roll.test(phoneno)) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t alert("Not a valid Roll Number"); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t function date() { 
 
\t \t \t \t var date = document.querySelector("#date").value; 
 

 
\t \t \t \t if (!date) { 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } 
 
\t \t \t \t else { 
 
\t \t \t \t \t alert("Empty Date"); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t } 
 

 
\t \t \t function check() { 
 

 
\t \t \t \t var t1 = allLetter(); 
 
\t \t \t \t var t2 = rollnumber(); 
 
\t \t \t \t var t3 = date(); 
 

 
\t \t \t \t console.log(t1); 
 
\t \t \t \t console.log(t2); 
 
\t \t \t \t console.log(t3); 
 

 
\t \t \t \t if (t1 && t2 && t3) { 
 
\t \t \t \t \t alert("Registration Successful"); 
 
\t \t \t \t \t return true; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t alert("One or More Fields are incorrectly set"); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t </script> 
 
\t </head> 
 

 
\t <body> 
 

 
\t \t <h2>STUDENT REGISTRATION FORM</h2> 
 

 
\t \t <form name="form1" method="post" onsubmit="return check()"> 
 
\t \t \t <label for="name">Name :</label> 
 
\t \t \t <input type="text" id="name"><br> 
 

 
\t \t \t <label for="roll">Roll No :</label> 
 
\t \t \t <input type="text" id="roll"><br> 
 

 
\t \t \t <label for="date">DOB :</label> 
 
\t \t \t <input type="date" id="date"><br> 
 

 
\t \t \t <input type="submit" value="Register"> 
 
\t \t </form> 
 

 
\t </body> 
 

 
</html>

來源

2017-05-05 Manav Saxena

具有u嘗試的onsubmit = 「檢查（）」 – tech2017

@techLove是的，我做到了，沒有工作:( –

嘗試實際上是通過js添加一個事件監聽器，而不是在onsubmit處理函數中，我之前看到過類似的情況，並且認爲它應該修復它 – jas7457

您倒置使用。測試方法。你應該在左邊使用正則表達式，因爲.test是一個正則表達式的方法。這裏你的代碼工作：

function allLetter() { 
      var name = document.querySelector("#name").value; 

      var letters = /^[A-Za-z]*$/; 
      if (letters.test(name)) { 
       return true; 
      } else { 
       alert("Not a valid Name"); 
       return false; 
      } 
     } 

     function rollnumber() { 
      var roll = document.querySelector("#roll").value; 

      var phoneno = /^\d{7}$/; 
      if (phoneno.test(roll)) { 
       return true; 
      } else { 
       alert("Not a valid Roll Number"); 
       return false; 
      } 
     } 

     function date() { 
      var date = document.querySelector("#date").value; 

      if (!date) { 
       return true; 
      } 
      else { 
       alert("Empty Date"); 
       return false; 
      } 
     } 

     function check() { 

      var t1 = allLetter(); 
      var t2 = rollnumber(); 
      var t3 = date(); 

      console.log(t1); 
      console.log(t2); 
      console.log(t3); 

      if (t1 && t2 && t3) { 
       alert("Registration Successful"); 
       return true; 
      } else { 
       alert("One or More Fields are incorrectly set"); 
       return false; 
      } 
     }

然後你就可以刪除的回報，只是使用的方法的onsubmit事件中，該方法將直接返回true或false

<form name="form1" method="post" onsubmit="check();">

來源

2017-05-05 17:09:25 quirimmo

我認爲你應該使用.test()方法，如here。

所以正則表達式第一，而不是name.test(letters)你應該使用letters.test(name)。

來源

2017-05-05 17:12:24 Hexiler

這裏是我的解決方案沒有所需的JavaScript只用HTML

<h2>STUDENT REGISTRATION FORM</h2> 
 

 
    <form name="form1" method="post"> 
 
     <label for="name">Name :</label> 
 
     <input type="text" id="name" pattern="[A-Za-z\s]+" required><br> 
 

 
     <label for="roll">Roll No :</label> 
 
     <input type="text" id="roll" pattern="[0-9]+" required><br> 
 

 
     <label for="date">DOB :</label> 
 
     <input type="date" id="date" required><br> 
 

 
     <input type="submit" value="Register"> 
 
    </form>

來源

2017-05-05 17:15:17

JavaScript中的學生註冊表單驗證

回答

相關問題