js验证两次输入密码一致

一 html代码 

<div class="zhuce_body">
    <div class="zhuce_kong">
    	<div class="zc">
        	<div class="bj_bai">
            <h3>欢迎注册</h3>
       	  	  <form action="${pageContext.request.contextPath}/UserRegisterServlet?op=register" method="post">
                <input name="userName" type="text" class="kuang_txt phone" placeholder="用户名">
                <input name="password" id="pw" type="password" class="kuang_txt possword" placeholder="密码(不少于6位)" >
                <input name="repassword" id="repw" type="password" class="kuang_txt possword" placeholder="确认密码" οnkeyup="checkpassword()">
                <span id="tishi"></span></input>
                <input name="mobile" type="text" class="kuang_txt possword" placeholder="手机号">
                <input name="email" type="text" class="kuang_txt email" placeholder="邮箱">
                <!-- <input name="identifyingCode" type="text" class="kuang_txt yanzm" placeholder="验证码"> -->
                
                <div>
                	<!-- <div class="hui_kuang"><img src="../img/zc_22.jpg" width="92" height="31"></div> -->
                	<!-- <div class="shuaxin"><a href="#"><img src="../img/zc_25.jpg" width="13" height="14"></a></div> -->
                </div>
                <div>
               		<input name="" type="checkbox" value=""><span>已阅读并同意<a href="#" target="_parent"><span class="lan">《XXXXX使用协议》</span></a></span>
                </div>
                <input name="注册" type="submit" class="btn_zhuce" value="注册">
                
                </form>
            </div>
        	<div class="bj_right">
            	<p>使用以下账号直接登录</p>
                <a href="#" class="zhuce_qq">QQ注册</a>
                <a href="#" class="zhuce_wb">微博注册</a>
                <a href="#" class="zhuce_wx">微信注册</a>
                <p>已有账号?<a href="userLogin.jsp">立即登录</a></p>
            
            </div>
        </div>
    </div>
</div>

二 js代码

<script type="text/javascript">
    	function checkpassword() {
    		var password = document.getElementById("pw").value;
    		var repassword = document.getElementById("repw").value;
    		
    		if(password == repassword) {
    			 document.getElementById("tishi").innerHTML="<br><font color='green'>两次密码输入一致</font>";
    			 document.getElementById("submit").disabled = false;
    			
			 }else {
				 document.getElementById("tishi").innerHTML="<br><font color='red'>两次输入密码不一致!</font>";
	    		 document.getElementById("submit").disabled = true; 
			 } 
    	}
    </script>

注意:这里的onkeyup事件,当用户释放键盘按钮时才执行checkpassword()函数,而且这里是实时监控的每次输完一个数字或者字母都会对比两次的密码。

三 效果图

注册界面

两次密码一致的情况: 

两次密码不一致的情况:

 

版权声明:本文为wangjian530原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangjian530/article/details/90343105