前端修改密码功能用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