JavaScript注册页表单验证作业

qq_65380288

已于 2023-11-21 20:47:03 修改

阅读量154

点赞数 1

文章标签： javascript 开发语言

于 2023-11-21 18:36:02 首次发布

本文链接：https://blog.csdn.net/qq_65380288/article/details/134538254

版权

题目：注册页表单验证

同意协议必须勾选
账号由6~10位的字符组合
手机号码由11位数字组合
密码是6~20位字母、数字和符号组合
两次密码输入一致
符合上述要求提交表单，否则组织表单提交并提示原因

运行截图：

代码部分：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <!-- <link rel="shortcut icon" href="./favicon.ico"> -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/register.css">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  <style>
    .chk {
      padding-bottom: 10px;
      /* text-align: center; */
      /* width: 300px; */
    }
  </style>
</head>

<body>
  <div class="xtx-wrapper">
    <div class="container">
      <!-- 卡片 -->
      <div class="xtx-card">
        <h3>新用户注册</h3>
        <form class="xtx-form" action="注册成功.html">
          <div data-prop="username" class="xtx-form-item">
            <span class="iconfont icon-zhanghao"></span>
            <input name="username" type="text" placeholder="设置用户名称">
            <span class="msg"></span>
          </div>
          <div data-prop="phone" class="xtx-form-item">
            <span class="iconfont icon-shouji"></span>
            <input name="phone" type="text" placeholder="输入手机号码  ">
            <span class="msg"></span>
          </div>
          <div data-prop="password" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
            <span class="msg"></span>
          </div>
          <div data-prop="confirm" class="xtx-form-item">
            <span class="iconfont icon-suo"></span>
            <input name="confirm" type="password" placeholder="请再次输入上面密码">
            <span class="msg"></span>
          </div>
          <div class="chk">
            <input type="checkbox">
            已阅读并同意<i style="color: rgb(39,186,155);">《用户服务协议》</i>
          </div>
          <div class="xtx-form-item">
            <button class="submit">下一步</button>
          </div>
        </form>
      </div>
    </div>
  </div>


  <script>
    // 1.同意协议必须勾选
    // 2.账号由6~10位的字符组合
    // 3.手机号码由11位数字组合
    // 4.密码是6~20位字母、数字和符号组合
    // 5.两次密码输入一致
    // 6.符合上述要求提交表单，否则组织表单提交并提示原因
    let submitButton = document.querySelector('.submit');
    let username = document.querySelector('input[name="username"]');
    let phone = document.querySelector('input[name="phone"]');
    let password = document.querySelector('input[name="password"]');
    let confirmPassword = document.querySelector('input[name="confirm"]');
    let agreementCheckbox = document.querySelector('input[type="checkbox"]');
    let usernameErrorMessage = document.querySelector('div[data-prop="username"] .msg');
    let phoneErrorMessage = document.querySelector('div[data-prop="phone"] .msg');
    let passwordErrorMessage = document.querySelector('div[data-prop="password"] .msg');
    let confirmPasswordErrorMessage = document.querySelector('div[data-prop="confirm"] .msg');
    submitButton.addEventListener('click', e => {
      // 1.同意协议必须勾选
      if (!agreementCheckbox.checked) {
        e.preventDefault(); // 阻止表单提交
        alert('请先同意用户服务协议。'); // 显示警告消息
      } else if (!(/^.{6,10}$/.test(username.value) && /^.{11}$/.test(phone.value) &&
        /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{6,20}$/.test(password.value)
        && confirmPassword.value === password.value)) {
        // 6.符合上述要求提交表单，否则组织表单提交并提示原因
        e.preventDefault(); // 阻止表单提交
        alert('注册信息错误'); // 显示警告消息
      } else { alert('注册成功'); }
    });
    // 2.账号由6~10位的字符组合
    username.addEventListener("blur", e => {
      if (!/^.{6,10}$/.test(username.value)) {
        usernameErrorMessage.textContent = '用户名必须由6至10位字符组成。';
      } else {
        usernameErrorMessage.textContent = '';
      }
    });
    // 3.手机号码由11位数字组合
    phone.addEventListener("blur", e => {
      if (!/^.{11}$/.test(phone.value)) {
        phoneErrorMessage.textContent = '手机号码必须由11位数字组成。';
      } else {
        phoneErrorMessage.textContent = '';
      }
    });
    // 4.密码是6~20位字母、数字和符号组合
    password.addEventListener("blur", e => {
      if (!/^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^&*])[a-zA-Z\d!@#$%^&*]{6,20}$/.test(password.value)) {
        passwordErrorMessage.textContent = '密码必须由6至20位字母、数字和符号组成。';
      } else {
        passwordErrorMessage.textContent = '';
      }
    });
    // 5.两次密码输入一致
    confirmPassword.addEventListener("blur", e => {
      if (confirmPassword.value !== password.value) {
        confirmPasswordErrorMessage.textContent = '两次密码输入不一致。';
      } else {
        confirmPasswordErrorMessage.textContent = '';
      }
    });
  </script>
</body>

</html>