第一種方法:在輸入框后面加一個空白的span標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div align="center"> <form id="commentForm" action="zhuce" method="post"> <td>密碼:</td> <td> <input type="text" id="password" required> </td> </tr> <tr> <td>重復密碼:</td> <td> <input type="text" id="password1" required onblur="checkpassword()"><span id="tishi"></span> </td> </tr> <td colspan="2"><div align="center"> <input type="submit" value="注冊"> </div> </td> </tr> </table> </form> </div> </body> <script> function checkpassword() { var password = document.getElementById("password").value; var repassword = document.getElementById("password1").value; if(password!=repassword){ document.getElementById("tishi").innerHTML = "<font color='red'>兩次密碼不相同</font>"; } } </script> </html>
但是點擊注冊按鈕還是會提交,所以說並沒有什么用。並且我發現getElementById只會識別id屬性,不會識別name屬性。
第二種方法:
<script> function checkpassword() { var password = document.getElementById("password").value; var repassword = document.getElementById("password1").value; if(password!=repassword){ alert("兩次輸入密碼不一致!") document.getElementById('password').value = ""; document.getElementById('password1').value = ""; } } </script>