实现注册动态判断两次密码是否输入一致（jquery+bootstrap）

最新推荐文章于 2022-09-29 11:31:17 发布

Powerful&Q

最新推荐文章于 2022-09-29 11:31:17 发布

阅读量1.1w

点赞数 11

本文链接：https://blog.csdn.net/m0_38139268/article/details/81903895

版权

前端技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需要引入：

<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

界面代码：

 <!--
  	作者：Powerful&Q
  	时间：2018-07-21
  	描述：
  -->
<body>
    <div style="width: 80%; margin: auto;">
    <center><h2>用户注册</h2> </center>
        <form class="form-horizontal" role="register" action="user?act=selectUser" method="post" style="width: 80%; margin: auto;">
            <div class="form-group">
                <label  class="col-sm-2 control-label">用户名：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="user.uname" required="required"
                        placeholder="请输入用户名 "> 
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" name="user.upassword" required="required"
                        placeholder="请输入密码" id="ipwd">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">确认密码：</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control"  required="required"
                        placeholder="请输入密码" id="i2pwd">
                </div>
            </div>
            
            <p id="msg_pwd" style="margin-left: 150px"></p>
            <div class="form-group">
                <label  class="col-sm-2 control-label">邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="user.email" required="required"
                        placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group">
                <label  class="col-sm-2 control-label">住&nbsp;&nbsp;&nbsp;&nbsp;址：</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="user.address" required="required"
                        placeholder="请输入住址">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    已有账号？点击<a href="login.jsp">登录！</a>
                    <button type="submit" class="btn btn-success"  style="float: right" id="btn_register">注册</button>
                </div>
            </div>
        </form>
    </div>
</body>

界面截图：

js代码：

<script type="text/javascript">
$(document).ready(function(){
    $('#ipwd').on('input propertychange', function() {                                
                               //input propertychange即实时监控键盘输入包括粘贴
        var pwd = $.trim($(this).val());                                          
                               //获取this，即ipwd的val()值，trim函数的作用是去除空格
        var rpwd = $.trim($("#i2pwd").val());
        if(rpwd!=""){
        if(pwd==""&&rpwd==""){                 
                //若都为空，则提示密码不能为空，为了用户体验（在界面上用required同时做了处理）
            $("#msg_pwd").html("<font color='red'>密码不能为空</font>");
        }
        else{
            if(pwd==rpwd){                                 //相同则提示密码匹配
            $("#msg_pwd").html("<font color='green'>两次密码匹配通过</font>");
            $("#btn_register").attr("disabled",false); //使按钮无法点击
            }else{                                          //不相同则提示密码匹配
            $("#msg_pwd").html("<font color='red'>两次密码不匹配</font>");
            $("#btn_register").attr("disabled",true);
        }
        }}
    })
})

//由于是两个输入框，所以进行两个输入框的几乎相同的判断
$(document).ready(function(){
        $('#i2pwd').on('input propertychange', function() {
            var pwd = $.trim($(this).val());
            var rpwd = $.trim($("#ipwd").val());
            if(pwd==""&&rpwd==""){
                $("#msg_pwd").html("<font color='red'>密码不能为空</font>");
            }
            else{
                if(pwd==rpwd){
                $("#msg_pwd").html("<font color='green'>两次密码匹配通过</font>");
                $("#btn_register").attr("disabled",false);
                }else{
                $("#msg_pwd").html("<font color='red'>两次密码不匹配</font>");
                $("#btn_register").attr("disabled",true);
            }
            }
        })
    })
</script>

主要截图：

第一次写博客，如有错误不妥之处，望大家及时批评纠正~

原创作品，转载时请注明出处

Powerful&Q

关注

11
点赞
踩
35

收藏

觉得还不错? 一键收藏
2
评论
实现注册动态判断两次密码是否输入一致（jquery+bootstrap）

需要引入： &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;&lt;script src="js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;&lt;script src="js/bootstrap.min.js"&gt;&lt;/script
复制链接

扫一扫