简单且实用的密码修改模态框

修改密码相信大家都不会陌生，几乎每个系统都缺不了修改密码，这是增强用户体验性的一种基本要求，一个网站中，若是没有修改密码这一功能的话，绝对活不长久，因为每位用户的都会有账号被盗取，信息被泄露的风险，若不能修改密码，那么对用户的利益便造成了巨大的损失，谁会用这样的网站呢? 所以说，密码的修改功能对于一个完整系统来说是必不可少的，具有重要性的。因此，这次便分享给大家一个以Bootstrap为基础来搭建的密码修改模态框，如图所示：
首先要做的是引入Bootstrap的相关CSS、Js文件，这是搭建该模态框的基础：

第二步，根据Bootstrap中的模态框模版搭建好修改密码模态框，html代码：

<!- - 模态框:修改密码 - ->
<div class="modal fade" id="updatePassword" tabindex="-1">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="line-height:20px;margin-top:-15px;margin-right:-10px;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title position-absolute" id="exampleModalLabel" style="top:8px;left:12px;">修改密码</h4>
                </div>
                <div class="modal-body">
                    <form name="editForm">
                        <div class="form-group">
                            <label for="recipient-name">原密码：</label>
                            <input type="password" id="oldpassword" class="form-control" name="oldpassword" required placeholder="原密码">
                            <div style="display: inline" id="tip1"></div>
                        </div>
                        <div class="form-group">
                            <label for="message-text">新密码：</label>
                            <input type='password' id="password1" name="password1" class="form-control" required placeholder="长度为: 6-18">
                            <div style="display: inline" id="tip2"></div>
                        </div>
                        <div class="form-group">
                            <label for="message-text">确认密码：</label>
                            <input type='password' id="password2" name="password2" class="form-control" required placeholder="请再次输入新密码">
                            <div style="display: inline" id="tip3"></div>
                        </div>
                    </form>
                </div>
<div class="modal-footer">
<button onclick="submitPassword()" class="btn btn-primary" ng-disabled="editForm.$invalid">确定</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

第三步，html的代码完成后，轮到js部分的代码，首先是为修改密码按钮绑定一个点击事件，点击后调用弹出模态框的方法：


绑定好方法后，在该方法内定义对新输入的密码进行长度的判断方法：

$("#password1").blur(function () {
                var num = $("#password1").val().length;
                if (num < 6) {
$("#tip2").html("<font color=\"red\" size=\"2\">  密码长度未达最小位数标准！</font>");
                }
                else if (num > 18) {
$("#tip2").html("<font color=\"red\" size=\"2\">  密码长度超出最大位数限制！</font>");
                }
                else {
$("#tip2").html("<font color=\"green\" size=\"2\"> 修改条件满足。</font>");
                }

定义判断确认密码中的信息是否与新输入的密码一致：
$("#password2").blur(function () {
                var tmp = $("#password1").val();
                var num = $("#password2").val().length;
                if ($("#password2").val() != tmp) {
$("#tip3").html("<font color=\"red\" size=\"2\">  与新输入密码不一致！</font>");
                }
                else {
                    if (num >= 6 && num <= 18) {
$("#tip3").html("<font color=\"green\" size=\"2\">  一致</font>");
                    }
                }
            });
//最后，弹出修改密码模态框
$("#updatePassword").modal();

保存修改后的密码，先是在模态框的确定按钮中绑定上保存事件：
获取模态框中各项密码信息，获取后通过post提交将数据以键值对的形式提交到数据库当中进行修改：

var flag = true; //修改成功否
var old = $("#oldpassword").val(); //用户原密码
var pass = $("#password1").val();  //新密码
var pass2 = $("#password2").val(); //确认密码
var num1 = $("#password1").val().length; //新密码长度
var num2 = $("#password2").val().length; //确认密码长度
//判断条件:1.新密码长度 != 确认密码长度 2.新密码和确认密码位数小于六 3.新密码和确认密码位数大于十八 4.新密码 != 旧密码
if (num1 != num2 || num1 < 6 || num2 < 6 || num1 > 18 || num2 > 18 || pass != pass2) {
              flag = false;
       }
            else {
                flag = true;
            }
            if (flag) {
                $.ajax({
                    type: 'POST',
                    url: 'ChangePassword',
                    data: { oldPassword: old, newPassword: pass },
                    success: function (msg) {
                        if (msg) {
                            alert(msg.Text);
                            location.reload();
                        }
                        else {
                            alert("修改失败");
                        }
                    }
                });
            }
            else {
                alert("您输入的数据有误，请检查新密码位数是否符合要求！");
            }

Js代码完成，到了这里模态框便可以正常的使用了，上效果图：