在轻量化平台上，目前已有登录界面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='服务配置'/>
<input type='button' class='btn btn-default' value='服务状态监控'
οnclick="javascript:location.href='transList.html';"/>
<input type='button' class='btn btn-primary' value='修改登录密码'
οnclick="javascript:location.href='modifyKey.html';">
<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>
更多推荐
网页实现修改密码
发布评论