网页实现修改密码
⽹页实现修改密码
在轻量化平台上，⽬前已有登录界⾯login.html、服务配置界⾯conf.html、服务状态监控界⾯transList.html，现在要求**⽤户在登录之后可以*修改密码*。**需求
1、⼝令长度⾄少6个字符；
茅台飞天真假对比鉴别2、⼝令必须包含如下⾄少两种字符的组合:
－⾄少⼀个⼩写字母；
－⾄少⼀个⼤写字母；
－⾄少⼀个数字；
－⾄少⼀个特殊字符：`~!@#$%^&*()-_=+\|[{}];:'",<.>/?  和空格
3.系统禁⽌明⽂显⽰⼝令及⼝令存储安全
- ⼝令需加密保护，不能够明⽂写⼊⽇志⽂件、配置⽂件以及cookie中；
- ⼝令⽂件必须设置访问控制，普通⽤户不能读取或拷贝加密的内容；
- 操作界⾯中的⼝令不能明⽂显⽰；
- ⼝令输⼊框内容禁⽌拷贝；
- ⼝令不能在⽹络中明⽂传输
4. - ⽤户修改⾃⼰⼝令时必须验证旧⼝令。
- 不允许修改除⾃⾝账号以外的账号的⼝令（管理员除外）。
**
第⼀步
先瞅⼀眼配置界⾯是啥样的。。俺写的修改密码界⾯⼤概跟这个差不多。
然后⼤段的ctrl+c/ctrl+v，copycopycopy。。
⽬标界⾯是这个样⼦的：
第⼆步
**
稍作修改，先把JS界⾯写好。⽐如说：
1.修改按钮颜⾊
`<div class="pull-right" >
<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 = NewPassword();
String confirmNewPassword = ConfirmNewPassword();
String oldPassword = OldPassword();
int length = newPassword.length();
ModifyPasswordResponse response =new ModifyPasswordResponse();
冬至日是几月几日2021/**
* 判断两次是否输⼊旧密码、旧密码是否正确
*/
if(StringUtils.isBlank(oldPassword))
前挡风玻璃修复
{
throw new BusinessException(107005,"旧密码为空");
}
if(!oldPassword.equals(DASASEEncryptUtil.ConfigPassword(), 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 = ptData(newPassword, DASASEEncryptUtil.SECRETKEY);        request.setNewPassword(pwd);
Properties properties =saveProperties(request);
refreshPassword(properties);
return response;
}
代码说明：依次进⾏旧密码是否输⼊正确、两次输⼊新密码是否⼀致、新密码长度验证、复杂度验证等验证。每⼀次如果判断出不符合要求，就会抛出异常，返回⼀个错误码。前端有对应的de可以返回弹窗消息，代码如下：
<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){
sultCode ==0)
{
alert("修改成功！");
window.location.href ="/login.html";
}
//判断是否输⼊旧密码、旧密码是否正确
sultCode ==107005){
alert("旧密码不能为空");
return;
}
sultCode ==107006){
alert("旧密码输⼊错误！");
return;
}
//判断两次新密码是否为空、两次修改密码是否⼀致
sultCode ==107000)
{
alert("新密码不能为空");
$("#label10").css("color","red");
return;
}
sultCode ==107001)
{
alert("请确认新密码");
$("#label11").css("color","red");
return;
}
sultCode ==107002)
{
alert("两次密码输⼊不⼀致！");
$("#label10").css("color","red");
$("#label11").css("color","red");唐三有20个魂环吗
return;
}
//判断密码是否过短(不低于5位）
sultCode ==107003)
{
alert("密码长度过短");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。