前端修改密码功能用jQuery怎么写?记录一下
思路:
1、想要实现修改密码,你肯定要先输入原始密码,所以第一步你应该获取输入的原始密码,然后去进行验证,看是否正确,如果不正确,给出提示。
2、当原始密码输入正确的时候,你就可以输入新密码了,那么新密码肯定有一定的输入规则,比如输入6-18位,比如必须包含字母或者数字或者特殊符号,这就需要根据你的具体需求去定。如果用户输入的密码,不符合你指定的规则,给出提示。
3、当新密码符合要求时,你就得再次输入一次确认密码,同理,你需要去判断输入的密码,与你刚才输入的是否一致,如果不一致,就得给出提示。
4、当全部输入完成时,就可以点击保存按钮提交了。
5、还需要注意的是,当用户只输入一部分内容,或者啥都没输入的时候,点击保存按钮,你得提示用户。
大概思路就是这样的,下面不废话,直接看代码。
<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'});
}
}
});
本篇文章内容借鉴了下面这篇文章,附上原文链接
https://blog.csdn.net/exceptional_derek/article/details/19198101