修改密码

最新推荐文章于 2024-08-29 23:35:38 发布

Kathy_LLi

最新推荐文章于 2024-08-29 23:35:38 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Kathy_Hui/article/details/83857360

本文介绍了一个密码修改功能的实现过程，包括HTML界面设计、使用jQuery进行表单验证和密码强度检查，以及通过AJAX调用后端接口更新密码。详细展示了如何在前端实时反馈密码错误信息，确保用户输入符合安全规范。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*
* @description: 修改密码
* @author: lhm
*/

html：

js：
$(function(){
    toShowReg();
})
/*
* 离开的时候
*/
function toShowReg() {
   // 原始密码
   $(".origPwd").focus(function(){
$(this).addClass("focus");
});
$(".origPwd").blur(function(){
var orgPwd_value = $(".origPwd").val();// 密码
checkPwd3(orgPwd_value);// 检查
$(this).removeClass("focus");
});
// 新的密码
$(".password").focus(function(){
$(this).addClass("focus");
});
$(".password").blur(function(){
var pwd_value = $(".password").val();// 密码
checkPwd(pwd_value);// 检查
$(this).removeClass("focus");
});

// 确认密码
$(".upassword").focus(function(){
$(this).addClass("focus");
});
$(".upassword").blur(function(){
var pwd2_value = $(".upassword").val();// 二次密码
var pwd1_value = $(".password").val();// 密码
checkPwd2(pwd1_value,pwd2_value);// 检查
$(this).removeClass("focus");
});
}
/*
* 检查原始密码
*/
function checkPwd3(param) {

var checkResult3 = true;

var checkPwdStr3 = $.trim(param);// 密码的检查

if( checkPwdStr3 =="" || checkPwdStr3 <= 0) {
$(".orgPassword-error").text("请输入密码");
checkResult3 = false;
} else if (checkPwdStr3.length < 6 || checkPwdStr3.length > 20 ) {
$(".orgPassword-error").text("密码长度为6-20个字符");
checkResult3 = false;
} else {
$(".orgPassword-error").text("");
checkResult3 = true;
}
return checkResult3;
}
/*
* 检查新的密码
*/
function checkPwd(param) {

var checkResult1 = true;

var checkPwdStr1 = $.trim(param);// 密码的检查

if( checkPwdStr1 =="" || checkPwdStr1 <= 0) {
$(".password-error").text("请输入密码");
checkResult1 = false;
} else if (checkPwdStr1.length < 6 || checkPwdStr1.length > 20 ) {
$(".password-error").text("密码长度为6-20个字符");
checkResult1 = false;
} else {
$(".password-error").text("");
checkResult1 = true;
}
return checkResult1;
}

/*
* 检查二次密码
*/
function checkPwd2(pwd1,pwd2) {

var checkResult2 = true;

// 密码的检查
var checkPwdStr1 = $.trim(pwd1);
var checkPwdStr2 = $.trim(pwd2);

if( checkPwdStr2 =="" || checkPwdStr2 <= 0) {
$(".upassword-error").text("请输入密码");
checkResult2 = false;
} else if (checkPwdStr1.length < 6 || checkPwdStr1.length > 20 ) {
$(".upassword-error").text("密码长度为6-20个字符");
checkResult2 = false;
} else if (checkPwdStr1 != checkPwdStr2 ) {
$(".upassword-error").text("两次输入的密码不一致");
checkResult2 = false;
} else {
$(".upassword-error").text("");
checkResult2 = true;
}
return checkResult2;
}

function toChangePwd(me){
var checkResult1 = checkPwd3($(".origPwd").val());
var checkResult2 = checkPwd($(".password").val());
var checkResult3 = checkPwd2($(".password").val(),$(".upassword").val());

if(checkResult1 && checkResult2 && checkResult3){
   var origPwd = $('.origPwd').val();
   var newPwd = $('.password').val();
   var upassword = $('.upassword').val();