js简单实现用户注册信息的校验代码

下面就是关于js简单实现用户注册信息的校验代码的完整攻略。

一、需求分析

在开发一个注册功能的网站时，我们需要对用户输入的注册信息进行校验，包括以下内容：

• 用户名：长度在6-20之间，只能包含字母、数字、下划线。
• 密码：长度在6-20之间，包含至少一个大写字母、至少一个小写字母和至少一个数字。
• 确认密码：需要与密码一致。
• 邮箱：需要符合邮箱格式。
• 手机号码：必须为正确的中国大陆手机号。

在前端页面上对输入框进行了一些基本的限制，但是我们还需要在后台对用户输入的注册信息进行更加严格的校验。

二、编写代码

1. 对用户名进行校验

对用户输入的用户名进行校验，我们可以用正则表达式进行判断。具体代码如下：

function checkUsername(username) {
  let flag = true;
  const reg = /^\w{6,20}$/;
  if (!reg.test(username)) {
    flag = false;
  }
  return flag;
}

这里我们定义了一个checkUsername()函数，接收用户输入的用户名作为参数，如果用户名符合规定，则返回true，否则返回false。其中，正则表达式/^\w{6,20}$/表示用户名必须由字母、数字、下划线组成，长度在6~20个字符之间。

2. 对密码进行校验

对用户输入的密码进行校验，我们同样可以使用正则表达式进行判断。具体代码如下：

function checkPassword(password) {
  let flag = true;
  const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,20}$/;
  if (!reg.test(password)) {
    flag = false;
  }
  return flag;
}

我们定义了一个checkPassword()函数，接收用户输入的密码作为参数，如果密码符合规定，则返回true，否则返回false。其中，正则表达式/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,20}$/表示密码至少包含一个大写字母、一个小写字母和一个数字，长度在6~20个字符之间。

3. 对确认密码进行校验

用户输入的确认密码应该与用户输入的密码一致。具体代码如下：

function checkConfirmPassword(password, confirmPassword) {
  if (password !== confirmPassword) {
    return false;
  }
  return true;
}

这里我们定义了一个checkConfirmPassword()函数，接收密码和确认密码两个参数，如果两者一致，则返回true，否则返回false。

4. 对邮箱进行校验

对用户输入的邮箱进行校验，同样可以使用正则表达式进行判断。具体代码如下：

function checkEmail(email) {
  let flag = true;
  const reg = /^([a-zA-Z0-9]+[_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
  if (!reg.test(email)) {
    flag = false;
  }
  return flag;
}

这里我们定义了一个checkEmail()函数，接收用户输入的邮箱作为参数，如果邮箱符合规定，则返回true，否则返回false。其中，正则表达式/^([a-zA-Z0-9]+[_|\-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/表示一个合法的邮箱格式。

5. 对手机号码进行校验

对用户输入的手机号码进行校验，同样可以使用正则表达式进行判断。具体代码如下：

function checkPhone(phone) {
  let flag = true;
  const reg = /^1[3456789]\d{9}$/;
  if (!reg.test(phone)) {
    flag = false;
  }
  return flag;
}

这里我们定义了一个checkPhone()函数，接收用户输入的手机号码作为参数，如果手机号码符合规定，则返回true，否则返回false。其中，正则表达式/^1[3456789]\d{9}$/表示一个合法的中国大陆手机号。

三、示例说明

示例1

我们可以在页面中添加一个按钮，点击按钮时触发校验操作。具体代码如下：

<input type="button" value="注册" onclick="submitForm()">

<script>
function submitForm() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  const email = document.getElementById('email').value;
  const phone = document.getElementById('phone').value;

  if (!checkUsername(username)) {
    alert('请输入正确的用户名');
    return;
  }

  if (!checkPassword(password)) {
    alert('请输入正确的密码');
    return;
  }

  if (!checkConfirmPassword(password, confirmPassword)) {
    alert('两次输入的密码不一致');
    return;
  }

  if (!checkEmail(email)) {
    alert('请输入正确的邮箱');
    return;
  }

  if (!checkPhone(phone)) {
    alert('请输入正确的手机号码');
    return;
  }

  // 校验通过，提交表单
  document.forms[0].submit();
}
</script>

在这个示例中，我们通过使用document.getElementById()方法获取用户输入的注册信息，并在submitForm()函数中进行校验。如果校验不通过，弹出相应的提示信息；如果校验通过，则提交表单。

示例2

在另一个页面中，我们可以为每个输入框添加实时校验功能。具体代码如下：

<label for="username">用户名：</label>
<input type="text" id="username" onblur="checkUsernameCallback()"><br>
<span id="username-tip"></span><br>

<label for="password">密码：</label>
<input type="password" id="password" onblur="checkPasswordCallback()"><br>
<span id="password-tip"></span><br>

<label for="confirm-password">确认密码：</label>
<input type="password" id="confirm-password" onblur="checkConfirmPasswordCallback()"><br>
<span id="confirm-password-tip"></span><br>

<label for="email">邮箱：</label>
<input type="text" id="email" onblur="checkEmailCallback()"><br>
<span id="email-tip"></span><br>

<label for="phone">手机号码：</label>
<input type="text" id="phone" onblur="checkPhoneCallback()"><br>
<span id="phone-tip"></span><br>

<script>
function checkUsernameCallback() {
  const username = document.getElementById('username').value;
  const tip = document.getElementById('username-tip');
  if (checkUsername(username)) {
    tip.innerHTML = '√';
    tip.style.color = 'green';
  } else {
    tip.innerHTML = '× 用户名必须由字母、数字、下划线组成，长度在6~20个字符之间';
    tip.style.color = 'red';
  }
}

function checkPasswordCallback() {
  const password = document.getElementById('password').value;
  const tip = document.getElementById('password-tip');
  if (checkPassword(password)) {
    tip.innerHTML = '√';
    tip.style.color = 'green';
  } else {
    tip.innerHTML = '× 密码至少包含一个大写字母、一个小写字母和一个数字，长度在6~20个字符之间';
    tip.style.color = 'red';
  }
}

function checkConfirmPasswordCallback() {
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  const tip = document.getElementById('confirm-password-tip');
  if (checkConfirmPassword(password, confirmPassword)) {
    tip.innerHTML = '√';
    tip.style.color = 'green';
  } else {
    tip.innerHTML = '× 密码和确认密码不一致';
    tip.style.color = 'red';
  }
}

function checkEmailCallback() {
  const email = document.getElementById('email').value;
  const tip = document.getElementById('email-tip');
  if (checkEmail(email)) {
    tip.innerHTML = '√';
    tip.style.color = 'green';
  } else {
    tip.innerHTML = '× 请输入正确的邮箱格式';
    tip.style.color = 'red';
  }
}

function checkPhoneCallback() {
  const phone = document.getElementById('phone').value;
  const tip = document.getElementById('phone-tip');
  if (checkPhone(phone)) {
    tip.innerHTML = '√';
    tip.style.color = 'green';
  } else {
    tip.innerHTML = '× 请输入正确的手机号码';
    tip.style.color = 'red';
  }
}
</script>

在这个示例中，我们为每个输入框添加了裸函数，并使用onblur事件触发校验。每次校验后，我们将校验结果显示在每个输入框下方的提示框中。如果校验不通过，则将提示框的颜色设为红色，否则设为绿色。