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="确认密码" onkeyup="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()函数,而且这里是实时监控的每次输完一个数字或者字母都会对比两次的密码。

三 效果图

注册界面

两次密码一致的情况: 

两次密码不一致的情况:

 

  • 27
    点赞
  • 112
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金州饿霸

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值