狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

在前端開發中，表單處理非常常見。

無論是用戶注冊、登錄，還是提交反饋等等，表單都是與用戶交互的重要方式。

使用 JavaScript，可以實現實時驗證、動態更新和異步提交等功能，用以提升用戶體驗。

典型的使用場景

常的使用場景有如下 5 種：

1. 表單驗證：確保用戶輸入的數據符合預期格式和要求。

2. 動態更新表單：根據用戶的輸入動態更新表單內容。

3. 提交表單數據：通過 AJAX 提交表單數據，而無需刷新頁面。

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

5. 防止重復提交：防止用戶多次點擊提交按鈕導致表單重復提交。

咱們通過一個具體的例子來分別講述上述場景的使用。

假設我們現在有一個注冊頁面，要求用戶輸入郵箱，選擇國家、城市。

<form id="registrationForm">   <label for="email">郵箱：</label>   <input     type="email"     id="email"     name="email"     oninvalid="this.setCustomValidity('郵箱地址不能為空，請輸入有效的郵箱地址。')"     oninput="setCustomValidity('')"     required   />   <span id="emailError" class="error"></span><br />    <label for="country">選擇國家：</label>   <select     id="country"     name="country"     oninvalid="this.setCustomValidity('國家不能為空，請選擇國家')"     oninput="setCustomValidity('')"     required   >     <option value="">請選擇國家</option>     <option value="China">中國</option>     <option value="USA">美國</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('城市不能為空，請選擇城市')"     oninput="setCustomValidity('')"     required   >     <option value="">請選擇城市</option>   </select>   <span id="cityError" class="error"></span><br />    <button id="submitButton" type="submit">注冊</button> </form> 

看一下實現的效果：

表單驗證

為郵箱地址添加了一個驗證，如果輸入的字符串中不含有@符號，則有警告信息。

這一部分的實現則是通過添加 submit 事件的處理達成的。

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

這里不僅驗證了郵箱，包括國家和城市的選擇也都進行了驗證。

動態更新表單

通過上述的例子，可能注意城市的信息是根據國家動態更新的，這一部分的動態更新的實現如下：

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

提交表單數據

可以通過 XMLHttpRequest 或 fetch API 提交表單數據，而無需刷新頁面。

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

document   .getElementById('registrationForm')   .addEventListener('submit', function (event) {     event.preventDefault(); // 阻止默認提交行為      var formData = new FormData(this);     //假設有一個頁面為/submit，那么這里就是提交表單數據到這個頁面進行處理。     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 等，以增強用戶體驗。

例如，當輸入框獲得焦點時顯示提示信息，當輸入框失去焦點時進行驗證。

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

防止重復提交

為了防止用戶多次點擊提交按鈕導致表單重復提交，可以在提交表單后禁用提交按鈕。

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

總結

前面已經看完了實現效果了，再看一版美化過的界面。