在前端開(kāi)發(fā)中，表單處理非常常見(jiàn)。

無(wú)論是用戶(hù)注冊(cè)、登錄，還是提交反饋等等，表單都是與用戶(hù)交互的重要方式。

使用 JavaScript，可以實(shí)現(xiàn)實(shí)時(shí)驗(yàn)證、動(dòng)態(tài)更新和異步提交等功能，用以提升用戶(hù)體驗(yàn)。

典型的使用場(chǎng)景

常的使用場(chǎng)景有如下 5 種：

1. 表單驗(yàn)證：確保用戶(hù)輸入的數(shù)據(jù)符合預(yù)期格式和要求。

2. 動(dòng)態(tài)更新表單：根據(jù)用戶(hù)的輸入動(dòng)態(tài)更新表單內(nèi)容。

3. 提交表單數(shù)據(jù)：通過(guò) AJAX 提交表單數(shù)據(jù)，而無(wú)需刷新頁(yè)面。

4. 處理表單事件：處理各種表單事件，如 focus、blur、change 等。

5. 防止重復(fù)提交：防止用戶(hù)多次點(diǎn)擊提交按鈕導(dǎo)致表單重復(fù)提交。

咱們通過(guò)一個(gè)具體的例子來(lái)分別講述上述場(chǎng)景的使用。

假設(shè)我們現(xiàn)在有一個(gè)注冊(cè)頁(yè)面，要求用戶(hù)輸入郵箱，選擇國(guó)家、城市。

<form id="registrationForm">   <label for="email">郵箱：</label>   <input     type="email"     id="email"     name="email"     oninvalid="this.setCustomValidity('郵箱地址不能為空，請(qǐng)輸入有效的郵箱地址。')"     oninput="setCustomValidity('')"     required   />   <span id="emailError" class="error"></span><br />    <label for="country">選擇國(guó)家：</label>   <select     id="country"     name="country"     oninvalid="this.setCustomValidity('國(guó)家不能為空，請(qǐng)選擇國(guó)家')"     oninput="setCustomValidity('')"     required   >     <option value="">請(qǐng)選擇國(guó)家</option>     <option value="China">中國(guó)</option>     <option value="USA">美國(guó)</option>     <option value="Canada">加拿大</option>   </select>   <span id="countryError" class="error"></span><br />    <label for="city">選擇城市：</label>   <select     id="city"     name="city"     oninvalid="this.setCustomValidity('城市不能為空，請(qǐng)選擇城市')"     oninput="setCustomValidity('')"     required   >     <option value="">請(qǐng)選擇城市</option>   </select>   <span id="cityError" class="error"></span><br />    <button id="submitButton" type="submit">注冊(cè)</button> </form> 

看一下實(shí)現(xiàn)的效果：

表單驗(yàn)證

為郵箱地址添加了一個(gè)驗(yàn)證，如果輸入的字符串中不含有@符號(hào)，則有警告信息。

這一部分的實(shí)現(xiàn)則是通過(guò)添加 submit 事件的處理達(dá)成的。

document   .getElementById('registrationForm')   .addEventListener('submit', function (event) {     var isValid = true;      // 驗(yàn)證郵箱格式     var email = document.getElementById('email').value;     var emailError = document.getElementById('emailError');     if (!email.includes('@')) {       emailError.textContent = '請(qǐng)輸入有效的郵箱地址';       isValid = false;     } else {       emailError.textContent = '';     }      // 驗(yàn)證國(guó)家選擇     var country = document.getElementById('country').value;     var countryError = document.getElementById('countryError');     if (country === '') {       countryError.textContent = '請(qǐng)選擇國(guó)家';       isValid = false;     } else {       countryError.textContent = '';     }      // 驗(yàn)證城市選擇     var city = document.getElementById('city').value;     var cityError = document.getElementById('cityError');     if (city === '') {       cityError.textContent = '請(qǐng)選擇城市';       isValid = false;     } else {       cityError.textContent = '';     }      // 如果驗(yàn)證不通過(guò)，阻止表單提交     if (!isValid) {       event.preventDefault();     }   }); 

這里不僅驗(yàn)證了郵箱，包括國(guó)家和城市的選擇也都進(jìn)行了驗(yàn)證。

動(dòng)態(tài)更新表單

通過(guò)上述的例子，可能注意城市的信息是根據(jù)國(guó)家動(dòng)態(tài)更新的，這一部分的動(dòng)態(tài)更新的實(shí)現(xiàn)如下：

document.getElementById('country').addEventListener('change', function () {   var country = this.value;   var citySelect = document.getElementById('city');   citySelect.innerHTML = ''; // 清空之前的選項(xiàng)    var cities = {     China: ['北京', '上海', '廣州', '深圳'],     USA: ['New York', 'Los Angeles', 'Chicago', 'Houston'],     Canada: ['Toronto', 'Vancouver', 'Montreal', 'Calgary'],   };    var defaultOption = document.createElement('option');   defaultOption.value = '';   defaultOption.textContent = '請(qǐng)選擇城市';   citySelect.appendChild(defaultOption);    //添加其它城市作為選項(xiàng)   if (country && cities[country]) {     cities[country].forEach(function (city) {       var option = document.createElement('option');       option.value = city;       option.textContent = city;       citySelect.appendChild(option);     });   } }); 

提交表單數(shù)據(jù)

可以通過(guò) XMLHttpRequest 或 fetch API 提交表單數(shù)據(jù)，而無(wú)需刷新頁(yè)面。

這種方法通常用于異步提交表單數(shù)據(jù)（AJAX）。

document   .getElementById('registrationForm')   .addEventListener('submit', function (event) {     event.preventDefault(); // 阻止默認(rèn)提交行為      var formData = new FormData(this);     //假設(shè)有一個(gè)頁(yè)面為/submit，那么這里就是提交表單數(shù)據(jù)到這個(gè)頁(yè)面進(jìn)行處理。     fetch('/submit', {       method: 'POST',       body: formData,     })       .then((response) => response.json())       .then((data) => console.log(data))       .catch((error) => console.error('Error:', error));   }); 

處理表單事件

JavaScript 可以處理各種表單事件，如 focus、blur、change 等，以增強(qiáng)用戶(hù)體驗(yàn)。

例如，當(dāng)輸入框獲得焦點(diǎn)時(shí)顯示提示信息，當(dāng)輸入框失去焦點(diǎn)時(shí)進(jìn)行驗(yàn)證。

var input = document.getElementById('email');  //當(dāng)輸入框獲得焦點(diǎn)時(shí)顯示提示信息 input.addEventListener('focus', function () {   document.getElementById('hint').textContent = '請(qǐng)輸入郵箱'; });  //當(dāng)輸入框失去焦點(diǎn)時(shí)檢查用戶(hù)名長(zhǎng)度是否至少為 5 個(gè)字符。 input.addEventListener('blur', function () {   if (this.value.length < 5) {     alert('郵箱至少需要5個(gè)字符');   } }); 

防止重復(fù)提交

為了防止用戶(hù)多次點(diǎn)擊提交按鈕導(dǎo)致表單重復(fù)提交，可以在提交表單后禁用提交按鈕。

document   .getElementById('registrationForm')   .addEventListener('submit', function (event) {     var submitButton = document.getElementById('submitButton');     submitButton.disabled = true;   }); 

總結(jié)

前面已經(jīng)看完了實(shí)現(xiàn)效果了，再看一版美化過(guò)的界面。