js验证两次输入密码一致

港控/mmm° 2022-01-30 12:11 319阅读 0赞

# 一 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="邮箱">
                    
                    
                    <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代码 #

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

# 三 效果图 #

注册界面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70][]

两次密码一致的情况：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 1][]

两次密码不一致的情况：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70]: /images/20220130/0e95358079c943a8bf5246e524c74388.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 1]: /images/20220130/dc6d3417cb604795a5d9f0888dbf73bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdqaWFuNTMw_size_16_color_FFFFFF_t_70 2]: /images/20220130/f1ed407bdad6411f9363cce8bfc39f2d.png