第一种方法:在输入框后面加一个空白的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>