How to write the front-end password modification function with jQuery? Record it
Ideas:
1. If you want to modify the password, you must enter the original password first, so the first step is to obtain the original password, and then verify it to see if it is correct. If it is incorrect, give a prompt.
2. When the original password is entered correctly, you can enter the new password, then the new password must have certain input rules, such as entering 6-18 digits, such as letters or numbers or special symbols, which needs to be based on you The specific needs are determined. If the password entered by the user does not meet the rules you specified, a prompt will be given.
3. When the new password meets the requirements, you have to enter it again to confirm the password. In the same way, you need to determine whether the entered password is consistent with the one you entered just now. If it is inconsistent, you have to give a prompt.
4. When all input is completed, you can click the save button to submit.
5. It should also be noted that when the user only enters a part of the content, or nothing is entered, click the save button, and you have to prompt the user.
Probably the idea is like this, don't talk nonsense below, just look at the code.
<tbody>
<tr>
<td class="td_left">旧密码 </td>
<td class="td_right"><input type="password" id="oldpassword" name="oldpassword" placeholder="请输入原密码">
<div style="display: inline" id="tip1"></div>
</td>
</tr>
<tr>
<td class="td_left">新密码 </td>
<td class="td_right"><input type="password" id="password1" name="password1" placeholder="请输入6到18位新密码">
<div style="display: inline" id="tip2"></div>
</td>
</tr>
<tr>
<td class="td_left">新密码确认 </td>
<td class="td_right"><input type="password" name="password2" id="password2" placeholder="请再次输入新密码" />
<div style="display: inline" id="tip3"></div>
</td>
</tr>
</tbody>
/* 旧密码输入框失去焦点时 */
$("#oldpassword").blur(function() {
var param = $("#oldpassword").val();
/* 用ajax验证是否和原来的旧密码相同 */
$.ajax({
url: "../../data/login-data.json",
async: false,
type: "get",
dataType: "json",
success: function(data) {
$.each(data, function(i, item) {
if (param == item["password"]) {
$("#tip1").html("<span>密码输入正确</span>").css({
'color':'green','marginLeft':'15px'});
} else {
$("#tip1").html("<span >密码输入错误</span>").css({
'color':'red','marginLeft':'15px'});
}
});
}
});
});
/* 输入新密码 */
$("#password1").blur(function() {
var num = $("#password1").val().length;
if (num < 6) {
$("#tip2").html("<span>密码太短，请重新输入</span>").css({
'color':'red','marginLeft':'15px'});
} else if (num > 18) {
$("#tip2").html("<span>密码太长，请重新输入</span>").css({
'color':'red','marginLeft':'15px'});
} else {
$("#tip2").html("<span>验证通过</span>").css({
'color':'green','marginLeft':'15px'});
}
});
/* 再次输入新密码 */
$("#password2").blur(function() {
var tmp = $("#password1").val();
var num = $("#password2").val().length;
if ($("#password2").val() != tmp) {
$("#tip3").html("<span>两次密码输入不一致，请重新输入</span>").css({
'color':'red','marginLeft':'15px'});
} else {
if (num >= 6 && num <= 18) {
$("#tip3").html("<span>验证通过</span>").css({
'color':'green','marginLeft':'15px'});
} else {
$("#tip3").html("<span>验证不通过，无效</span>").css({
'color':'red','marginLeft':'15px'});
}
}
});
/* 绑定保存按钮的点击事件 */
$(".change").click(function() {
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;
if (num1 != num2 || num1 < 6 || num2 < 6 || num1 > 18 || num2 > 18 || pass != pass2) {
flag = false;
} else {
flag = true;
}
if (flag) {
$("#tip4").show().html("<span>保存成功</span>").css({
'color':'green','marginLeft':'100px','marginTop':'20px'});
$("#oldpassword").val("");
$("#password1").val("");
$("#password2").val("");
$("#tip1").empty();
$("#tip2").empty();
$("#tip3").empty();
$("#tip4").delay(2000).hide(0);
} else {
if($('#oldpassword').val().length == 0 || $('#password1').val().length == 0 || $('#password2').val().length == 0){
$("#tip4").show().html("<span>输入信息不完整，请重输入</span>").css({
'color':'red','marginLeft':'100px','marginTop':'20px'});
}else{
$("#tip4").show().html(
"<span>输入有误，请重新输入</span>").css({
'color':'red','marginLeft':'100px','marginTop':'20px'});
}
}
});
The content of this article is borrowed from the following article, and the original link is attached
https://blog.csdn.net/exceptional_derek/article/details/19198101