编码练习：JavaScript：验证输入的密码是否一致

kllo__

已于 2022-02-17 17:05:08 修改

阅读量2k

点赞数 2

分类专栏： javascript 文章标签： javascript linq webview

于 2022-02-17 17:04:25 首次发布

本文链接：https://blog.csdn.net/kllo__/article/details/122987352

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

问题描述

验证两次输入的密码是否一致，以及密码是否满足要求：长度大于等于6，必须包含数字

<html>
 <head>
 </head>
 <body>
	<form id = "myForm">
  <p>
    <label for="password1">Enter the password</label>:
    <input type="password" name="password1" id="password1" required>
  </p>
  <p>
    <label for="password2">Confirm the password</label>:
    <input type="password" name="password2" id="password2" required>
  </p>

  <input type="submit" value="Send">
</form>

<p id="passwordHelp"></p> </body>
</html>

解决方法

我自己是在两个输入框都添加了事件监听，希望第一个密码输入的时候，焦点不在第一个输入框就检查第一个密码输入的格式是否正确，但是不行

///Write-Your-Code
document.querySelector("form").addEventListener("submit", e => {
  const password1 = e.target.elements.password1.value;
  const password2 = e.target.elements.password2.value;
  let message = "Password validation successful";
  // Check confirmation input
  if (password1 === password2) {
    const minimalLength = 6;
    // Check password length
    if (password1.length >= minimalLength) {
      const regexPassword = /\d+/;
      // Check the presence of at least one digit
      if (!regexPassword.test(password1)) {
        message = "Error: password must contain at least one digit";
      }
    } else {
      message = `Error: password must be at least ${minimalLength} characters long`;
    }
  } else {
    message = "Error: passwords don't match";
  }
  // Update help text
  document.getElementById("passwordHelp").textContent = message;
  // Optional: prevent form data sending
  e.preventDefault();
});

显示效果：

kllo__

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
编码练习：JavaScript：验证输入的密码是否一致

问题描述验证两次输入的密码是否一致，以及密码是否满足要求：长度大于等于6，必须包含数字<html> <head> </head> <body> <form id = "myForm"> <p> <label for="password1">Enter the password</label>: <input type="password" name="password1
复制链接

扫一扫