JavaScript雙重形式驗證

我是JavaScript新手，我一直在做基於HTML和JavaScript的大學任務。在這項任務中，我被要求創建一些表格，允許一個人註冊某種形式的教育課程。我被要求使用HTML創建表單並僅使用JavaScript驗證條目。JavaScript雙重形式驗證

我一直在努力弄清楚是如何使用驗證的一個街區，以驗證多個表單輸入（如果可能的話），我想只用validateForm驗證兩個firstname和familyname投入。

下面是一段我一直在測試了：

<head> 
    <script> 
     function validateForm() { 
      var x = document.forms["nameform"]["firstname"].value; 
      if (x == null || x == "") { 
       alert("first name must be filled out"); 
       return false; 
      } 
     } 
    </script> 
</head> 
<body> 
    <form name="nameform" , action="demo_form.asp" , onsubmit="return validateForm()" , method="post"> 
<b>First name:</b> 
     <input type="text" name="firstname"> 
     <br> 
<b>Family name:</b> 
     <input type="text" name="familyname"> 
     <br> 
     <input type="submit" value="Submit"> 
    </form> 
</body>

任何幫助將不勝感激！

來源

2013-04-04 bigsenator

<head> 
<script> 
function validateForm() 
{ 
    var firstname=document.getElementById('txtfirstname'); 
    var familyname=document.getElementById('txtfamilyname'); 

    if (firstname.value=="") 
     { 
     alert("first name must be filled out"); 
     return false; 
     } 
    if (familyname.value=="") 
    { 
     alert("familyname must be filled out"); 
     return false; 
    } 

} 
</script> 
</head> 

<body> 
<form name="nameform", action="demo_form.asp", onsubmit="return validateForm()", method="post"> 
<b>First name:</b> <input type="text" id="txtfirstname" name="firstname"> 
<br> 
<b>Family name:</b> <input type="text" id="txtfamilyname" name="familyname"> 
<br> 
<input type="submit" value="Submit"> 
</form> 

</body>

來源

2013-04-04 12:38:57

謝謝！這正是我所期待的。 – bigsenator 2013-04-04 13:24:26

您可以檢查所有輸入，存儲錯誤消息（如果有的話），並在結束時返回false，即使發生一次故障。

即

function validateForm() { 
    var x = document.forms["nameform"]["firstname"].value, errors = []; 
    if (x == null || x == "") { 
     errors.push("first name must be filled out"); 
    } 
    x = document.forms["nameform"]["familyname"].value; 
    if (x == null || x == "") { 
     errors.push("family name must be filled out"); 
    } 
    if(errors.length > 0) { // check if there were any errors 
     alert(errors.join("\n")); // alert all messages together 
     return false; 
    } 
}

來源

2013-04-04 12:38:03 techfoobar

簡單地將其存儲在多個變量，並且有多個if語句：

<script> 
    function validateForm() { 
     // name the variables appropriately 
     var firstname = document.forms["nameform"]["firstname"].value; 
     var familyname = document.forms["nameform"]["familyname"].value; 
     // check if either of them are correct, if not alert and return false. 
     if (firstname == null || firstname == "") { 
      alert("first name must be filled out"); 
      return false; 
     } else if (familyname == null || familyname == ""){ 
      alert("family name must be filled out"); 
      return false; 
     } 
     return true; 
    } 
</script>

來源

2013-04-04 12:41:04

未分配布爾值的默認值爲false。如果所有字段都有效，則應該顯式返回true。 – ElPedro 2013-04-04 12:56:38

謝謝@ElPedro，我想知道在我這樣做的時候是否需要它。謝謝。 – 2013-04-04 22:50:14

夫婦的可能性...

<script> 
function validateForm() 
{ 
    var x=document.forms["nameform"]["firstname"].value; 
    if (x==null || x=="") 
    { 
     alert("first name must be filled out"); 
     return false; 
    } 
    x=document.forms["nameform"]["lasttname"].value; 
    if (x==null || x=="") 
    { 
     alert("last name must be filled out"); 
     return false; 
    } 
return true; 
} 
</script>

將呈現因爲驗證失敗，因此每個字段都會提醒如果所有字段都正確，則返回true。

<script> 
function validateForm() 
{ 
    var errorString=""; 
    var x=document.forms["nameform"]["firstname"].value; 
    if (x==null || x=="") 
    { 
     errorString+="first name must be filled out\n"; 
    } 
    x=document.forms["nameform"]["lasttname"].value; 
    if (x==null || x=="") 
    { 
     errorString+="last name must be filled out\n"; 
    } 
    if(errorString=="") 
    { 
     return true; 
    } 
    else 
    { 
     alert(errorString); 
     return false; 
    } 
} 
</script>

將返回一個警報，列出所有驗證失敗的字段。

另外，我總是喜歡在第一個未通過驗證的字段上使用focus（）方法，將光標置於需要更正的字段中。

來源

2013-04-04 12:46:11 ElPedro

試試這個..

function validateForm() 
{ 
    var msg=''; 
    var flag=false; 
     var x = document.forms["nameform"]["firstname"].value; 
     if (x == null || x == "") 
     { 
      flag = true; 
      msg = ' First Name ' 
     } 
     x = document.forms["nameform"]["familyname"].value; 
     if (x == null || x == "") 
     { 
      if(flag==true) 
       msg = msg + 'And Family Name ' 
      else 
       msg = msg + ' Family Name '; 
      flag = true; 
     } 
     if (flag==true) { 
      msg = msg + " must be filled out"; 
     alert(msg); 
     } 
     return false; 
}

來源

2013-04-04 12:46:48 Bhushan

JavaScript雙重形式驗證

回答

相關問題