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

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

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

        

            

                

                    
                        ×
                    
                    
修改密码
                
                

                    

                        

                            原密码：
                            
                            

                        
                        

                            新密码：
                            
                            

                        
                        

                            确认密码：
                            
                            

                        
                    
                

确定
取消
                
            
        
    

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


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

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

定义判断确认密码中的信息是否与新输入的密码一致：
$("#password2").blur(function () {
                var tmp = $("#password1").val();
                var num = $("#password2").val().length;
                if ($("#password2").val() != tmp) {
$("#tip3").html("  与新输入密码不一致！");
                }
                else {
                    if (num >= 6 && num <= 18) {
$("#tip3").html("  一致");
                    }
                }
            });
//最后，弹出修改密码模态框
$("#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代码完成，到了这里模态框便可以正常的使用了，上效果图：