JS表單驗證 聚焦 離焦 input（onfocus onblur）
阿新 • • 發佈：2018-10-31
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function showTips(id, info) { document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>"; } function check(id, info) { var uValue = document.getElementById(id).value; if (uValue == "") { document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>"; } else { document.getElementById(id + "span").innerHTML = ""; } } </script> </head> <body> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">會員註冊</font> USER REGISTER </td> </tr> <tr> <td> 使用者名稱 </td> <td> <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','使用者名稱必填！')" onblur="check('user','使用者名稱不能為空！')" /><span id="userspan"></span> </td> </tr> <tr> <td> 密碼 </td> <td> <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密碼必填')" onblur="check('password','密碼不能為空!')" /><span id="passwordspan"></span> </td> </tr> <tr> <td> 確認密碼 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil" /> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px" /> </td> </tr> <tr> <td> 性別 </td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="註冊" /> </td> </tr> </table> </form> </body> </html>