使用XHR進行JavaScript驗證使用XHR

Question

我對JavaScript非常陌生，我一直在線上使用教程，但他們似乎經常使用PHP進行驗證並使用JavaScript進行警告，我讓用戶xhr發佈數據的應用程序到服務器，但在此之前我想讓JavaScript完成一些驗證。然後我將重新驗證PHP。

這裏是表單代碼

<form id="booking" action=""> 
       <span class="red">*</span>First Name: 
       <input type="text" name="firstName" id="firstName"> 
       <br> 

       <span class="red">*</span>Last Name: 
       <input type="text" name="lastName" id="lastName"> 
       <br> 

       <span class="red">*</span>Contact Number: 
       <input type="text" name="number" id="number"> 
       <br> 

       Unit Number(optional): 
       <input type="text" name="unit" id="unit"> 
       <br> 

       <span class="red">*</span>Street Number: 
       <input type="text" name="streetNumber" id="streetNumber"> 
       <br> 

       <span class="red">*</span>Street Name: 
       <input type="text" name="streetName" id="streetName"> 
       <br> 

       <span class="red">*</span>Suburb: 
       <input type="text" name="pickupSuburb" id="pickupSuburb"> 
       <br> 

       Destination Suburb<span class="red">*</span>: 
       <input type="text" name="destinationSuburb" id="destinationSuburb"> 
       <br> 
       Pick-Up Date and Time<span class="red">*</span>: 
       <input type="datetime-local" name="dateTime" id="dateTime"> 
       <br> 

       <br> 
       <input type="button" value="Submit" 
         onclick="getData('bookingprocess.php','message', firstName.value, lastName.value, number.value, unit.value, streetNumber.value, streetName.value, pickupSuburb.value, destinationSuburb.value, dateTime.value)"/> 
       <input type="reset" value="Reset"> 

      </form> 

<div id="message"> 
      </div> 

我已經創造了警告信息覈實。

這裏是JavaScript

// file simpleajax.js 
var xhr = createRequest(); 
function getData(dataSource, divID, firstName, lastName, number, unit, streetNumber, streetName, pickupSuburb, destinationSuburb, dateTime) { 
    if(xhr) { 
     var place = document.getElementById(divID); 
     var requestbody = "firstName="+encodeURIComponent(firstName)+"&lastName="+encodeURIComponent(lastName)+"&number="+encodeURIComponent(number)+"&unit="+encodeURIComponent(unit)+"&streetNumber="+encodeURIComponent(streetNumber)+"&streetName="+encodeURIComponent(streetName)+"&pickupSuburb="+encodeURIComponent(pickupSuburb)+"&destinationSuburb="+encodeURIComponent(destinationSuburb)+"&dateTime="+encodeURIComponent(dateTime); 
     xhr.open("POST", dataSource, true); 
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4 && xhr.status == 200) { 
      place.innerHTML = xhr.responseText; 
      } // end if 
     } // end anonymous call-back function 
     xhr.send(requestbody); 
    } // end if 
} // end function getData() 

function checkForm(booking) { 

    var valid = true; 

    if(firstName.value.length <= 0) { 
     window.alert("Name is empty"); 
     booking.firstName.focus(); 
     return valid = false; 
    } 
} 

注意會有更多的驗證，我的問題是我怎麼能叫的驗證從形式，或直接從XHR，這是最好的做法是什麼？我知道從表單中調用XHR可能被認爲是不好的做法，以及我已經硬編碼了所有的值？

讓這個工作一直很麻煩，所以，如果它有點Hodge podge道歉。

Answer 1

填充表單（當光標離開字段時）進行驗證會更有意義，因爲您可以向用戶添加一些提示。就像，如果用戶輸入一封電子郵件，你會檢查它是否包含@，如果它不包含，那麼通知他們他們的電子郵件輸入有問題會更方便用戶（相反，他們可能會發送表單，然後驗證它然後告訴他們表單不好，但他們必須再次填寫表單，這有點令人沮喪）。

嘗試

<input type="text" onblur="alert('out!');" /> 

該火災時，輸入失去焦點。現在，您可能想知道如何使用這種處理中其他地方定義的函數。可以做，例如，像這樣：

JS：

window.myHandler = function(input,event) { ... }; 

HTML：

<input type="text" onblur="window.myHandler(input,event);" /> 

注意，在HTML onblur屬性event是一個「預定義的， 「包含事件對象」實例「的變量，但對於IE的老版本，您應該使用

window.myHandler = function(input,event) { 
    event = event || window.event; // elder IE store the Event object in window.event 
    // input is your DOM element. You can use input.value to get the value 
    // or this.classList to add some class which indicates (via CSS) that the input is wrong 
    ... 
};