JS实现注册界面表单校验

下面是JS实现注册界面表单校验的完整攻略：

步骤一：准备工作

在HTML页面中创建一个表单，表单中包含各种需要验证的输入框，例如：用户名、密码、邮箱等。给表单中的输入框设置相应的属性（例如：name、id、required等），方便JavaScript代码获取和操作。

步骤二：编写JavaScript代码

1. 获取表单元素

在JavaScript中通过document.getElementById()获取表单元素，例如：

let form = document.getElementById('registerForm');
let usernameInput = document.getElementById('username');
let passwordInput = document.getElementById('password');
let emailInput = document.getElementById('email');

2. 创建验证函数

根据输入框的要求，编写相应的验证函数，例如：

function checkUsername() {
  let username = usernameInput.value.trim();
  let usernameError = document.getElementById('usernameError');
  if (username.length < 6 || username.length > 12) {
    usernameError.innerHTML = '用户名长度必须为6-12个字符';
    return false;
  } else {
    usernameError.innerHTML = '';
    return true;
  }
}

function checkPassword() {
  let password = passwordInput.value.trim();
  let passwordError = document.getElementById('passwordError');
  if (password.length < 6 || password.length > 16) {
    passwordError.innerHTML = '密码长度必须为6-16个字符';
    return false;
  } else {
    passwordError.innerHTML = '';
    return true;
  }
}

function checkEmail() {
  let email = emailInput.value.trim();
  let emailError = document.getElementById('emailError');
  let emailReg = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
  if (!emailReg.test(email)) {
    emailError.innerHTML = '邮箱格式不正确';
    return false;
  } else {
    emailError.innerHTML = '';
    return true;
  }
}

3. 绑定事件

在表单元素上绑定相应的事件（例如：input、blur、focus等），使得在输入框内容改变、失去焦点或获得焦点时都能够自动触发验证函数。

usernameInput.addEventListener('blur', checkUsername);
passwordInput.addEventListener('blur', checkPassword);
emailInput.addEventListener('blur', checkEmail);

4. 提交表单

在表单提交时，对所有的输入框进行验证，并根据返回值判断是否允许表单提交。

form.addEventListener('submit', function(event) {
  if (!(checkUsername() && checkPassword() && checkEmail())) {
    event.preventDefault();
  }
});

示例说明

示例一

假设需要对一个长度为6-12的用户名进行验证，代码如下：

<input type="text" id="username" name="username" required>
<span id="usernameError" class="error"></span>

JavaScript代码如下：

function checkUsername() {
  let username = usernameInput.value.trim();
  let usernameError = document.getElementById('usernameError');
  if (username.length < 6 || username.length > 12) {
    usernameError.innerHTML = '用户名长度必须为6-12个字符';
    return false;
  } else {
    usernameError.innerHTML = '';
    return true;
  }
}

let usernameInput = document.getElementById('username');
usernameInput.addEventListener('blur', checkUsername);

当输入框失去焦点时，会自动触发验证函数checkUsername()，如果输入框中的用户名长度小于6或大于12，会在页面上显示错误提示信息。

示例二

假设需要对一个邮箱地址进行验证，代码如下：

<input type="email" id="email" name="email" required>
<span id="emailError" class="error"></span>

JavaScript代码如下：

function checkEmail() {
  let email = emailInput.value.trim();
  let emailError = document.getElementById('emailError');
  let emailReg = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
  if (!emailReg.test(email)) {
    emailError.innerHTML = '邮箱格式不正确';
    return false;
  } else {
    emailError.innerHTML = '';
    return true;
  }
}

let emailInput = document.getElementById('email');
emailInput.addEventListener('blur', checkEmail);

当输入框失去焦点时，会自动触发验证函数checkEmail()，如果输入框中的邮箱地址格式不符合要求（例如：缺少@符号、缺少域名等），会在页面上显示错误提示信息。