网页实现修改密码

在轻量化平台上，目前已有登录界面login.html、服务配置界面conf.html、服务状态监控界面transList.html，现在要求**用户在登录之后可以*修改密码*。**

需求

1、口令长度至少6个字符；
2、口令必须包含如下至少两种字符的组合:
  －至少一个小写字母；
  －至少一个大写字母；
  －至少一个数字；
  －至少一个特殊字符：`~!@#$%^&*()-_=+\|[{}];:'",<.>/?  和空格
3.系统禁止明文显示口令及口令存储安全
	- 口令需加密保护，不能够明文写入日志文件、配置文件以及cookie中；
	- 口令文件必须设置访问控制，普通用户不能读取或拷贝加密的内容；
	- 操作界面中的口令不能明文显示；
	- 口令输入框内容禁止拷贝；
	- 口令不能在网络中明文传输
4.	- 用户修改自己口令时必须验证旧口令。
	- 不允许修改除自身账号以外的账号的口令（管理员除外）。

**

第一步

**
先瞅一眼配置界面是啥样的。。俺写的修改密码界面大概跟这个差不多。

然后大段的ctrl+c/ctrl+v，copycopycopy。。
目标界面是这个样子的：

第二步

**
稍作修改，先把JS界面写好。比如说：
1.修改按钮颜色

`<div class="pull-right" style="margin-top:30px;"> <input type='button' class='btn btn-default' value='服务配置'/>&nbsp;&nbsp; <input type='button' class='btn btn-default' value='服务状态监控' οnclick="javascript:location.href='transList.html';"/>&nbsp;&nbsp; <input type='button' class='btn btn-primary' value='修改登录密码' οnclick="javascript:location.href='modifyKey.html';">&nbsp;&nbsp; <input type='button' class='btn btn-default' value='退出' οnclick='exit()'/> </div>`

2.删除不需要的按钮和输入框；
3.添加需要的输入框和“修改密码”按钮：

/**
*需求中有两条：口令输入框不能拷贝、不能明文显示
*把”input type”设置成password类型
*/

<div class="row">

                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="form-group label-floating">
                                                <label class="control-label" id="label2">旧密码</label>
                                                <input type="password" class="form-control" id="oldPassword">
                                            </div>
                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="form-group label-floating">
                                                <label class="control-label" id="label10">新密码</label>
                                                <input type="password" class="form-control" id="newPassword">
                                            </div>
                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="form-group label-floating">
                                                <label class="control-label" id="label11">确认新密码</label>
                                                <input type="password" class="form-control" id="confirmNewPassword">
                                            </div>
                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <button type="button" onclick="modifyPassword();" class="btn btn-primary">修改密码</button>
                                        </div>
                                    </div>

**

第三步

**
完成后端修改密码的逻辑，先把代码贴出来：

@LogExecution
    @ResponseBody
    @RequestMapping(value = "/modifyPassword", method = { RequestMethod.POST})
    public ModifyPasswordResponse modifyPassword(@RequestBody ModifyPasswordRequest request)
    { 
        String newPassword = request.getNewPassword();
        String confirmNewPassword = request.getConfirmNewPassword();
        String oldPassword = request.getOldPassword();
        int length = newPassword.length();



        ModifyPasswordResponse response = new ModifyPasswordResponse();


        /** * 判断两次是否输入旧密码、旧密码是否正确 */
        if (StringUtils.isBlank(oldPassword))
        { 
            throw new BusinessException(107005,"旧密码为空");
        }

        if (!oldPassword.equals(DASASEEncryptUtil.decryptData(masProperties.getConfigPassword(), DASASEEncryptUtil.SECRETKEY)) )
        { 
            throw new BusinessException(107006,"旧密码输入错误");
        }

        /** * 判断新密码是否为空、两次修改密码是否一致 */
        if (StringUtils.isBlank(newPassword))
        { 
            throw new BusinessException(107000,"新密码为空");
        }

        if (StringUtils.isBlank(confirmNewPassword))
        { 
            throw new BusinessException(107001,"未输入确认新密码");
        }

        if (!newPassword.equals(confirmNewPassword))
        { 
            throw new BusinessException(107002,"两次新密码输入不一致！");
        }

        /** * 判断密码是否过短(不低于5位） */
        if (length < 6)
        { 
            throw new BusinessException(107003,"新密码长度过短");
        }


        /** * 判断密码是否有大小写区分 */
        int lowerNum = 0;
        int upperNum = 0;
        for (int i = 0; i < length ; i++ ) { 

            char passwordCh = newPassword.charAt(i);

            if (Character.isLowerCase(passwordCh)) { 

                lowerNum++;

            }

            if (Character.isUpperCase(passwordCh)) { 

                upperNum++;

            }
        }

        if (lowerNum == 0 || upperNum == 0){ 

            throw new BusinessException(107004, "新密码需要大小写");

        }


        String pwd = DASASEEncryptUtil.encryptData(newPassword, DASASEEncryptUtil.SECRETKEY);
        request.setNewPassword(pwd);
        Properties properties = saveProperties(request);
        refreshPassword(properties);

        return response;
    }

代码说明：依次进行旧密码是否输入正确、两次输入新密码是否一致、新密码长度验证、复杂度验证等验证。每一次如果判断出不符合要求，就会抛出异常，返回一个错误码。前端有对应的result.code可以返回弹窗消息，代码如下：

<script>

    function modifyPassword() { 
        var oldPassword = $("#oldPassword").val();
        var newPassword = $("#newPassword").val();
        var confirmNewPassword = $("#confirmNewPassword").val();
        var aoData = { 
            "oldPassword":oldPassword,
            "newPassword" : newPassword,
            "confirmNewPassword" : confirmNewPassword
        };
        console.log(aoData)
        $.ajax({ 
            url: "/api/modifyPassword",
            data: JSON.stringify(aoData),
            type: 'POST',
            contentType: 'application/json;charset=UTF-8',
            success: function (result) { 
                if (result.resultCode == 0)
                { 
                    alert("修改成功！");
                    window.location.href = "/login.html";
                }

                //判断是否输入旧密码、旧密码是否正确
                if(result.resultCode == 107005){ 
                    alert("旧密码不能为空");
                    return;
                }
                if (result.resultCode == 107006){ 
                    alert("旧密码输入错误！");
                    return;
                }

                //判断两次新密码是否为空、两次修改密码是否一致
                if (result.resultCode == 107000)
                { 
                    alert("新密码不能为空");
                    $("#label10").css("color", "red");
                    return;
                }

                if (result.resultCode == 107001)
                { 
                    alert("请确认新密码");
                    $("#label11").css("color", "red");
                    return;
                }

                if (result.resultCode == 107002)
                { 
                    alert("两次密码输入不一致！");
                    $("#label10").css("color", "red");
                    $("#label11").css("color", "red");
                    return;
                }

                //判断密码是否过短(不低于5位）
                if (result.resultCode == 107003)
                { 
                    alert("密码长度过短");
                    return;
                }

                //判断新密码复杂度是否符合要求
                if (result.resultCode == 107004)
                { 
                    alert("密码必须为数字、大小写字母、符号的组合且长度不得少于6位");
                    return;
                }
                    }
                })
            }
</script>