提升用戶體驗的JavaScript表單校驗與圖片錯誤提示
高效的前端表單校驗是提升用戶體驗的關鍵。本文將詳細講解如何使用JavaScript實現優雅的文本框校驗，并在錯誤時在輸入框下方顯示包含圖片的錯誤提示信息，如同示例圖片所示。
首先，我們需要在頁面加載完成后立即執行校驗函數，檢查輸入框是否為空，并顯示相應的錯誤提示。這可以通過JavaScript的onload事件或其他頁面加載完成后的回調函數實現。
其次，為了實時反饋，我們利用onBlur事件。當用戶離開輸入框時，觸發校驗函數。函數內，通過value屬性獲取輸入框的值，并使用正則表達式或自定義規則進行校驗。
校驗失敗時，我們需要動態創建html元素來顯示錯誤提示。創建一個
元素，包含錯誤圖片和文本信息，并將其插入到輸入框之后。圖片路徑在JavaScript代碼中指定。 以下示例代碼展示了創建和插入錯誤提示元素：
立即學習“Java免費學習筆記（深入）”；
// 獲取輸入框元素 const input = document.getElementById('myInput'); // 校驗函數 function validateInput() { const value = input.value; const ErrorDiv = document.getElementById('errorDiv'); // 假設 errorDiv 已存在 if (value === "") { errorDiv.innerHTML = `@@##@@請輸入內容`; // error.png 為你的錯誤圖片路徑 errorDiv.style.display = 'block'; } else { errorDiv.style.display = 'none'; } } // 綁定onBlur事件 input.addEventListener('blur', validateInput); // 初始化校驗 validateInput();
請將 “error.png” 替換為你的實際圖片路徑，并確保HTML中已預先創建 id=”errorDiv” 的
元素。 更復雜的校驗邏輯可根據實際需求擴展。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
