js题目7

最新推荐文章于 2025-04-09 08:53:37 发布
3283478051Sun
最新推荐文章于 2025-04-09 08:53:37 发布
阅读量336
点赞数 2
文章标签： javascript css 开发语言
本文链接：https://blog.youkuaiyun.com/2401_86997425/article/details/145420769
版权
屏幕录制 2025-02-02 163217
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>注册表单</title>
  <style>
    body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f9;
}

form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#sendCodeButton {
  background-color: #007BFF;
  color: #fff;
}

#submitButton {
  background-color: #28a745;
  color: #fff;
  margin-right: 10px;
}

#resetButton {
  background-color: #dc3545;
  color: #fff;
}
  </style>
</head>

<body>
  <form id="registrationForm">
    <label for="nickname">昵称：</label>
    <input type="text" id="nickname" placeholder="请输入昵称，不超过10个字">
    <br>
    <label for="name">姓名：</label>
    <input type="text" id="name" placeholder="请输入姓名，不超过4个字">
    <br>
    <label for="qq">QQ：</label>
    <input type="text" id="qq" placeholder="请输入 QQ 号，长度 6 - 10 位数字">
    <br>
    <label for="phone">手机号：</label>
    <input type="text" id="phone" placeholder="请输入 11 位手机号">
    <br>
    <label for="email">邮箱：</label>
    <input type="email" id="email" placeholder="请输入邮箱">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" placeholder="请输入密码，由字母和数字组成，8 - 16 位">
    <br>
    <label for="confirmPassword">确认密码：</label>
    <input type="password" id="confirmPassword" placeholder="请再次输入密码">
    <br>
    <label for="verificationCode">验证码：</label>
    <input type="text" id="verificationCode" placeholder="请输入验证码">
    <button type="button" id="sendCodeButton">发送验证码</button>
    <br>
    <button type="submit" id="submitButton" disabled>提交</button>
    <button type="reset" id="resetButton">重置</button>
  </form>
  <script>
    // 获取表单元素
const form = document.getElementById('registrationForm');
const nicknameInput = document.getElementById('nickname');
const nameInput = document.getElementById('name');
const qqInput = document.getElementById('qq');
const phoneInput = document.getElementById('phone');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirmPassword');
const verificationCodeInput = document.getElementById('verificationCode');
const sendCodeButton = document.getElementById('sendCodeButton');
const submitButton = document.getElementById('submitButton');
const resetButton = document.getElementById('resetButton');

// 点击输入框隐藏提示文字
const inputs = form.querySelectorAll('input');
inputs.forEach(input => {
  input.addEventListener('focus', () => {
    input.placeholder = '';
  });
  input.addEventListener('blur', () => {
    if (input.id === 'nickname') {
      input.placeholder = '请输入昵称，不超过10个字';
    } else if (input.id === 'name') {
      input.placeholder = '请输入姓名，不超过4个字';
    } else if (input.id === 'qq') {
      input.placeholder = '请输入 QQ 号，长度 6 - 10 位数字';
    } else if (input.id === 'phone') {
      input.placeholder = '请输入 11 位手机号';
    } else if (input.id === 'password') {
      input.placeholder = '请输入密码，由字母和数字组成，8 - 16 位';
    } else if (input.id === 'confirmPassword') {
      input.placeholder = '请再次输入密码';
    } else if (input.id === 'verificationCode') {
      input.placeholder = '请输入验证码';
    }
  });
});

// 发送验证码按钮点击事件
let countdown;
sendCodeButton.addEventListener('click', () => {
  sendCodeButton.disabled = true;
  submitButton.disabled = false;
  let timeLeft = 60;
  countdown = setInterval(() => {
    sendCodeButton.textContent = `${timeLeft} 秒后重新发送`;
    timeLeft--;
    if (timeLeft < 0) {
      clearInterval(countdown);
      sendCodeButton.disabled = false;
      sendCodeButton.textContent = '发送验证码';
    }
  }, 1000);
});

// 提交按钮点击事件
form.addEventListener('submit', (e) => {
  e.preventDefault();
  // 验证昵称
  const nickname = nicknameInput.value;
  if (nickname.length > 10) {
    alert('昵称不能超过10个字');
    return;
  }
  // 验证姓名
  const name = nameInput.value;
  if (name.length > 4) {
    alert('姓名不能超过4个字');
    return;
  }
  // 验证 QQ 号
  const qq = qqInput.value;
  if (!/^\d{6,10}$/.test(qq)) {
    alert('QQ 号应为长度 6 - 10 位的数字');
    return;
  }
  // 验证手机号
  const phone = phoneInput.value;
  if (!/^\d{11}$/.test(phone)) {
    alert('手机号应为 11 位数字');
    return;
  }
  // 验证密码
  const password = passwordInput.value;
  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(password)) {
    alert('密码应由字母和数字组成，长度为 8 - 16 位');
    return;
  }
  // 验证确认密码
  const confirmPassword = confirmPasswordInput.value;
  if (password !== confirmPassword) {
    alert('两次输入的密码不一致');
    return;
  }
  // 验证验证码
  const verificationCode = verificationCodeInput.value;
  if (verificationCode !== '0505') {
    alert('验证码输入错误');
    return;
  }
  alert('注册成功！');
});

// 重置按钮点击事件
resetButton.addEventListener('click', () => {
  alert('表单已重置');
});
  </script>
</body>

</html>