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に添付されています。