Como escrever a função de modificação de senha de front-end com jQuery? Grave isto

Idéias:
1. Se você deseja modificar a senha, deve primeiro inserir a senha original, portanto, o primeiro passo é obter a senha original e, em seguida, verificar se está correta. Se estiver incorreta, solicite .
2. Quando a senha original é inserida corretamente, você pode inserir a nova senha, então a nova senha deve ter certas regras de entrada, como inserir de 6 a 18 dígitos, como letras ou números ou símbolos especiais, que devem ser baseados em você As necessidades específicas são determinadas. Se a senha inserida pelo usuário não atender às regras que você especificou, um prompt será fornecido.
3. Quando a nova senha atender aos requisitos, você terá que digitá-la novamente para confirmá-la. Da mesma forma, você precisa determinar se a senha digitada é consistente com a que você digitou agora. Se for inconsistente, você tem que dar um prompt.
4. Quando todas as entradas forem concluídas, você pode clicar no botão Salvar para enviar.
5. Também deve ser observado que quando o usuário insere apenas uma parte do conteúdo, ou nada é inserido, clique no botão Salvar e você deve solicitar ao usuário.
Provavelmente a ideia é assim, não fale besteiras abaixo, apenas olhe o código.

<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'});
			}
			
		}
	});

O conteúdo deste artigo foi retirado do seguinte artigo, e o link original está anexado em
https://blog.csdn.net/exceptional_derek/article/details/19198101