客戶端表單驗證。

Question

所以我一直在嘗試做客戶端表單驗證。我試圖驗證名字，然後將其餘的工作。我假設Javascript應該檢查每個「onkeyup」的字段，並顯示我的消息，如果該字段中沒有字符，則需要「First Name Required」。我將在下面留下我的表單信息，然後是我以後使用的驗證代碼。我正在運行將'index.php'鏈接到'validation.js'的腳本。該腳本位於「」標記旁邊的index.php中。

感謝您的任何幫助，我真的很感激它。

<form method="POST" name="signup" action="php/processuserform.php"> 

<input id="firstname" onsubmit="validateFirstName()" placeholder="First Name" 
type="text" /><label id="firstnameprompt"></label> 

<br><br> 

<input id="last_name" onkeyup="validateLastName()" placeholder="Last Name" 
type="text" /><label id="last_nameprompt"></label> 

<br><br> 


<input id="email" onkeyup="validateEmail()" placeholder="Email" type="text" /><label 
id="emailprompt"></label> 

<br /><br /> 

<input id="password" onkeyup="validatePassword()" placeholder="Create Password" 
type="password" /><label id="passwordprompt"></label> 

<br /><br /> 

<strong>Male</strong><input id="male" value="male" type="radio" /><label 
id="maleprompt"></label> 

<strong>Female</strong><input id="female" value="female" type="radio" /><label 
id="femaleprompt"></label> 


<br /><br /> 

<label for="submit">"I Agree To <a href="#">Terms And Conditions"</a></label> <input 
id="submit" value="Submit" type="submit" name="submit"/><br /><br /> 

======================================= ...

現在是我一直在嘗試使用的驗證。只是試圖確保字段不是空的。

function validateFirstName() 
{ 
var name = document.getElementById("firstname").value; 

if(name.length == 0) 

{ 
producePrompt("First Name Required", "firstnameprompt", "red"); 
return false; 

} 
} 

function producePrompt(message, promptlocation, color) 
{ 
document.getElementById(promptLocation).innerHTML = message; 
document.getElementById(promptLocation).style.color = color; 

} 

Answer 1

如果你想要做的就是確保字段不爲空，您可以通過給你的JavaScript作爲要求它標誌着一類防止很多重複。

<input id="firstname" class="required" placeholder="First Name" /> 

注意我已經刪除了內嵌JavaScript並添加了我們的className。現在我們可以使用一個函數來確保任何帶有className「required」的輸入中都有文本。

這樣做的問題是，除了像「firstname is required」這樣的通用類型（我們可以通過獲取id來完成）之外，我們不能爲我們的catch-all JavaScript編寫漂亮的乾淨驗證消息。我們也無法使用我們的全部功能來定製我們放置每條驗證消息的位置。這就是數據屬性派上用場的地方。所以，現在我們的文本框的樣子：

<input id="firstname" class="required" placeholder="First Name" data-message="We need your first name!" data-prompt="firstnameprompt" /> 

的「數據 - _」屬性是用於存儲數據的特定於該元素，這樣我們就可以使用通用的功能，而不犧牲特異性真的很方便。你可以用你想要的任何名字創建任意數量的名字（但是在「數據」的前面加上名字是最好的做法，你可以通過正則表達式來使用它們來獲得具體信息，而不必寫出大量的情況 - 特定的JavaScript。不管怎樣，現在我們已經準備好做一個功能，可以做十的工作。

var requireds = document.getElementsByClassName('required'); 
for(var i = 0, i < requireds.length; i++) { //for each required field 
    requireds.addEventListener('keyup', function(event){ 
     //do stuff whenever this element changes 
    }); 
} 

現在，我們已經把它貼聽衆給每個需要的文本框，將執行「//做的東西」每當如果我們決定更改觸發驗證的事件，則很容易在一行而不是十行中執行

說到事件，現在是我們需要思考的時候t我們正在使用的事件的效率。在這個例子中，每次在該字段中都有一個關鍵字時，它會查看它是否爲空。這種情況很少發生（刪除和退格，僅舉幾例）。否則，大多數情況下，鍵入會發生，因爲用戶正在向該字段輸入數據。所以你真的只是檢查用戶是否已經從框中刪除了現有的文本。如果他們點擊提交而沒有觸及任何文本框，他們將被允許通過。不是一個非常有用的功能，是嗎？相反，我們應該將我們的活動更改爲form.submit。您可能不喜歡這種聲音，因爲您希望反饋更加及時，我同意，但這是代表您可以讚美form.submit事件的代碼。如果我們只被允許使用一個事件進行驗證，那麼表單提交將會給用戶發送空白數據的可能性最小。 Submit.click是緊隨其後的，但用戶可以按下輸入鍵並通過空白數據。因此，讓我們放棄上面的代碼，做：

var signupForm = document.getElementsByName('signup')[0]; 
signupForm.addEventListener('submit', function(event){ 
    var requireds = document.getElementsByClassName('required'); 
    for (var i = 0; i < requireds.length; i++){ 
     if(requireds[i].value.length == 0){ 
       event.preventDefault(); //stop the form from submitting 
       var errorMessage = requireds[i].getAttribute('data-message'); 
       var promptLabel = document.getElementsById(requireds[i].getAttribute('data-prompt'))[0]; 
       promptLabel.innerHTML = errorMessage; 
     } 
    } 
    event.preventDefault(); //stop the form from submitting 
    return errorMessage.length == 0; //for older browsers, false if there's an error 
    }); 

以上將驗證整個表單，找到地方它是無效的，並提出很好的格式化的錯誤消息的提示標籤，你必須在相鄰的地方。這基本上就是JQuery.validate插件的工作方式，除了更酷的功能。

對JavaScript驗證的強制性警告：它應該只是爲了方便用戶獲得更多的即時反饋，或者爲您的服務器節省一些額外的負載。黑客/機器人很容易繞過你的註冊頁面，並直接發送post頭到processesuserform.php，所以你的php應該總是在觸發數據庫之前做一些強大的驗證/編碼，並且發佈任何原始數據。

Answer 2

替代方法適用於現代瀏覽器：使用html5表單驗證（無JS需求）進行客戶端表單驗證 - 如下所示：<input type=text required minlength=8>。

Answer 3

ü可以用你的JavaScript supose

function validate(){ 
      var title=document.meetingform.subject.value; 
      var status=false; 
      if(title==""){ 
      document.getElementById("subjecterror").innerHTML= 
      "Please enter your name"; 
      status=false; 
      }else{ 
      document.getElementById("subjecterror").innerHTML=""; 
      status=true; 
      } 
      return status; 
      } 

在HTML中有這樣做很容易：

<form name="meetingform" class="form-horizontal" action="<?php echo base_url();?>index.php/Notes/add_notes" onsubmit="return validate()" method="POST" enctype="multipart/form-data"> 
    <div class="form-body"> 
     <div class="form-group"> 
     <label class="control-label col-md-3">SUBJECT</label> 
     <div class="col-md-9"> 
      <input name="subject" id="subject" placeholder="Title" class="form-control" type="text"> 
      <span id="subjecterror" name="subjecterror" style="color:#f00"></span> 
     </div> 
     </div> 
<form>