使用JavaScript創(chuàng)建帶有圖片的文本框校驗錯誤提示
許多前端開發(fā)者需要在用戶輸入文本框后進行校驗，并在校驗失敗時在輸入框下方顯示包含圖標(biāo)的錯誤信息的提示。本文將演示如何使用JavaScript實現(xiàn)此功能，并模擬文中圖片的效果。
我們的目標(biāo)是在用戶輸入文本框后失去焦點（onBlur事件）時，觸發(fā)校驗函數(shù)。該函數(shù)根據(jù)預(yù)設(shè)規(guī)則（例如正則表達式）判斷輸入內(nèi)容是否有效。無效時，在輸入框下方顯示包含錯誤圖標(biāo)的提示信息；有效時，清除之前的錯誤提示。
關(guān)鍵在于利用JavaScript操作dom元素。我們將創(chuàng)建一個新的元素（例如），用于顯示錯誤信息和圖標(biāo)。該元素動態(tài)添加到輸入框的父元素中，并設(shè)置其位置使其位于輸入框下方。
以下代碼片段演示了如何實現(xiàn)該功能：
立即學(xué)習(xí)“Java免費學(xué)習(xí)筆記（深入）”；
const inputField = document.getElementById('myInput'); const errorContainer = document.createElement('span'); errorContainer.style.color = 'red'; errorContainer.style.display = 'none'; // 添加包含錯誤圖片的img元素 const errorIcon = document.createElement('img'); errorIcon.src = '/uploads/20250307/174130282467ca2c285cf18.jpg'; // 使用文章中提供的圖片路徑 errorIcon.style.marginRight = '5px'; errorContainer.appendChild(errorIcon); inputField.parentNode.insertBefore(errorContainer, inputField.nextSibling); inputField.addEventListener('blur', () => { const inputValue = inputField.value; const isValid = validateInput(inputValue); // 自定義校驗函數(shù) if (!isValid) { errorContainer.textContent = '輸入無效！'; errorContainer.style.display = 'block'; } else { errorContainer.style.display = 'none'; } }); function validateInput(value) { // 添加你的校驗邏輯，例如正則表達式匹配 // 示例：只允許輸入數(shù)字 return /^d+$/.test(value); }
這段代碼首先創(chuàng)建了一個元素來顯示錯誤信息，并添加了一個包含錯誤圖標(biāo)的
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
