JavaScript實現表單校驗程式碼
阿新 • • 發佈：2020-12-29
技術標籤：JavaScript小作業
表單校驗功能，當失去焦點時，如果使用者名稱或密碼為空，在其後新增提醒資訊
提示：提示資訊可以放在span中，顏色通過css樣式設定
程式碼如下
<body> 使用者名稱：<input name="username" type="text" onfocus="handleFocus()" onblur="nameBlur()" onchange="nc()"/><font id="1" color="red"></font><br/> 密碼：<input name="pwd" type="password" onfocus="handleFocus()" onblur="pwdBlur()" onchange="pc()"/><font id="2" color="red"></font><br/> <button type="submit">提交</button><br/> </body> <script> function nameBlur() { var nam=document.querySelector("font[id='1']"); var v=document.querySelector("input[name^='u']") if(v.value==''){ nam.innerHTML="*使用者名稱不能為空" } } function nc() { var nam=document.querySelector("font[id='1']"); nam.innerHTML=""; } function pwdBlur() { var nam=document.querySelector("font[id='2']"); var v=document.querySelector("input[name^='p']") if(v.value==''){ nam.innerHTML="*密碼不能為空" } } function pc() { var nam=document.querySelector("font[id='2']"); nam.innerHTML=""; } </script>