做一个京东页面的用户注册验证模块

好的，下面是一个简单的京东页面的用户注册验证模块的示例代码：

HTML:

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <br>
  <label for="confirm-password">确认密码：</label>
  <input type="password" id="confirm-password" name="confirm-password" required>
  <br>
  <label for="email">电子邮件：</label>
  <input type="email" id="email" name="email" required>
  <br>
  <button type="submit" id="register-btn">注册</button>
</form>

JavaScript:

const form = document.querySelector('form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const confirmPasswordInput = document.getElementById('confirm-password');
const emailInput = document.getElementById('email');
const registerBtn = document.getElementById('register-btn');

function validateUsername() {
  const username = usernameInput.value.trim();
  if (username.length < 4 || username.length > 16) {
    usernameInput.setCustomValidity('用户名长度必须在4到16个字符之间');
  } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
    usernameInput.setCustomValidity('用户名只能包含字母、数字和下划线');
  } else {
    usernameInput.setCustomValidity('');
  }
}

function validatePassword() {
  const password = passwordInput.value.trim();
  if (password.length < 6 || password.length > 16) {
    passwordInput.setCustomValidity('密码长度必须在6到16个字符之间');
  } else {
    passwordInput.setCustomValidity('');
  }
}

function validateConfirmPassword() {
  const confirmPassword = confirmPasswordInput.value.trim();
  if (confirmPassword !== passwordInput.value.trim()) {
    confirmPasswordInput.setCustomValidity('两次输入的密码不一致');
  } else {
    confirmPasswordInput.setCustomValidity('');
  }
}

function validateEmail() {
  const email = emailInput.value.trim();
  if (!/^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(email)) {
    emailInput.setCustomValidity('请输入有效的电子邮件地址');
  } else {
    emailInput.setCustomValidity('');
  }
}

function validateForm() {
  validateUsername();
  validatePassword();
  validateConfirmPassword();
  validateEmail();
}

form.addEventListener('submit', event => {
  event.preventDefault();
  validateForm();
  if (form.checkValidity()) {
    alert('注册成功！');
    form.reset();
  }
});

usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
confirmPasswordInput.addEventListener('input', validateConfirmPassword);
emailInput.addEventListener('input', validateEmail);

这段代码中，我们使用了 HTML5 提供的表单验证功能，包括 `required` 属性和 `type="email"` 属性，以及使用了 JavaScript 来自定义表单验证逻辑。

其中，`validateUsername`、`validatePassword`、`validateConfirmPassword` 和 `validateEmail` 函数分别用于验证用户名、密码、确认密码和电子邮件地址的格式是否正确，并使用 `setCustomValidity` 方法来设置自定义验证信息。`validateForm` 函数用于调用上述四个验证函数进行表单验证。

最后，我们在表单的 `submit` 事件监听器中，阻止默认提交行为，并先调用 `validateForm` 函数进行表单验证，如果表单验证通过，则弹出注册成功的提示框，并重置表单。