提升用戶體驗的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