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事件触发校验。每次校验后,我们将校验结果显示在每个输入框下方的提示框中。如果校验不通过,则将提示框的颜色设为红色,否则设为绿色。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js简单实现用户注册信息的校验代码 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • js几秒以后倒计时跳转示例

    下面我将为您提供“js几秒以后倒计时跳转示例”的完整攻略。 示例一:使用window.setTimeout()方法实现倒计时跳转 首先,在HTML页面中添加一个div元素,用于显示倒计时的时间: <div id="countdown">5</div> 接下来,添加以下JavaScript代码: // 获取倒计时di…

    JavaScript 2023年5月27日
    00
  • JQuery 在表单提交之前修改 提交的值 原创

    下面是一份完整的 JQuery 在表单提交之前修改提交值的攻略: 1. 准备工作 首先,在使用 JQuery 改变表单提交值之前,我们需要引入 JQuery 库文件。在 HTML 文件中加入下面的代码: <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js&…

    JavaScript 2023年6月10日
    00
  • js实现简单的日历显示效果函数示例

    首先,我们需要了解一下实现日历显示效果的基本思路。通常情况下,我们需要用到JavaScript来获取当前日期,然后根据当前日期生成日历表格。在生成日历表格的过程中,可以使用HTML和CSS来美化日历的显示效果。 下面,我们将演示如何使用JavaScript来实现简单的日历显示效果。 实现步骤 获取当前日期 我们可以使用JavaScript中的Date对象来获…

    JavaScript 2023年5月27日
    00
  • JavaScript DOM节点添加示例

    当我们需要对网页中的元素进行动态的增删改时,JavaScript就是我们的好帮手之一。在JavaScript中,通过操作网页文档的对象模型(DOM)来实现对页面元素的增删改查。其中节点的添加,是常用的一种操作。 添加DOM节点的方法 在JavaScript中,有多种方式可以添加DOM节点,以下是其中的两种: 1. createElement()方法 crea…

    JavaScript 2023年6月10日
    00
  • js获取json中key所对应的value值的简单方法

    要想获取JSON数据中某个key对应的value值,可以使用JavaScript中JSON对象的相关方法来实现。下面是两种简单的方法: 方法一:使用点语法 如果你知道JSON数据中具体的key名字,可以使用点语法(.)获取其对应的value值。例如,下面是一个包含两个key值对(name和age)的JSON对象: { "name": &q…

    JavaScript 2023年5月27日
    00
  • 徒手实现关于JavaScript的24+数组方法

    徒手实现关于JavaScript的24+数组方法 在这篇攻略中,我们将徒手实现JavaScript中24个及以上的数组方法。这些方法包括常用的push,pop,shift和unshift等,以及其他数组方法如map,filter,reduce,every,some等。我们将会学到如何使用JavaScript编写这些方法,这将展示数组方法是如何工作的。 方法1…

    JavaScript 2023年5月27日
    00
  • html中使用javascript调用本地程序(exe、doc等)实现代码

    要实现在HTML页面中使用JavaScript调用本地程序(如.exe、.doc等)需要使用浏览器提供的“ActiveXObject”对象,这个对象可以在IE浏览器中使用,其它浏览器则需要使用不同的方式实现。下面我们就来详细讲解如何在HTML中使用JavaScript调用本地程序的完整攻略。 步骤1:创建一个ActiveXObject 在JavaScript…

    JavaScript 2023年5月27日
    00
  • js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    作为网站的作者,为了保证用户提交的数据有效和安全,我们需要对输入的电子邮箱、手机号和邮政编码进行正则验证。JavaScript和jQuery都可以进行正则验证,下面是针对这三种常见输入的完整攻略: 1. 电子邮箱验证 正则表达式 电子邮箱的验证需要用到正则表达式,下面是一个常用的正则表达式: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-]…

    JavaScript 2023年6月1日
    00
合作推广
合作推广
分享本页
返回顶部