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

标签: html  jquery  bootstrap  前端

  • 需要引入:

<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>
  • 主要截图:

            

 

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

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

 

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