手把手教你使用JavaScript实现表单验证

开发 前端
在Web项目开发中,经常会看到表单验证的功能。例如,用户注册、用户登录等,需要对用户填写的内容进行验证。接下来,小编带着大家一起来实现表单验证的用户名、密码、性别、手机号码、邮箱验证的功能。

[[387172]]

一、前言

在Web项目开发中,经常会看到表单验证的功能。例如,用户注册、用户登录等,需要对用户填写的内容进行验证。接下来,小编带着大家一起来实现表单验证的用户名、密码、性别、手机号码、邮箱验证的功能。

二、项目准备

开发工具:HBuilderX

浏览器:Google Chrome浏览器

三、项目目标

1.了解什么是正则表达式。

2.掌握正则表达式的语法。

3.学会应用正则表达式。

四、项目实现

HTML

  1. <div class="box"
  2.             <div class="box-head"><h1>欢迎注册</h1><p style="font-size: 15px;">已有账号?<a href="#" style="color: #3366D4;">登录</a></p></div> 
  3.             <div class="box-body"
  4.                 <form id="register" > 
  5.                     <table
  6.                         <tr> 
  7.                             <th>用户名称:</th> 
  8.                             <td> 
  9.                                 <input type="text" id="user" name="user" placeholder="长度4-12位,英文大小写字母"
  10.                             </td> 
  11.                             <td> 
  12.                                 <div></div> 
  13.                             </td> 
  14.                         </tr> 
  15.                         <tr> 
  16.                             <th>密  码:</th> 
  17.                             <td><input type="password" id="passWord" name="passWord" placeholder="长度6-20位,大小写字母、数字或下划线"></td> 
  18.                             <td> 
  19.                                 <div></div> 
  20.                             </td> 
  21.                         </tr> 
  22.                         <tr> 
  23.                             <th>确认密码:</th> 
  24.                             <td><input type="password" id="repassWord" name="repassWord" placeholder="请再次输入密码进行确认"></td> 
  25.                             <td> 
  26.                                 <div></div> 
  27.                             </td> 
  28.                         </tr> 
  29.                         <tr> 
  30.                             <th>性  别:</th> 
  31.                             <td><input type="radio" id="Male" name="sex" value="1"/><label for="Male">男</label>   
  32.                                 <input type="radio" id="Female" name="sex" value="0"/><label for="Female">女</label></td> 
  33.                             <td> 
  34.                                 <div></div> 
  35.                             </td> 
  36.                         </tr> 
  37.                         <tr> 
  38.                             <th>手机号码:</th> 
  39.                             <td><input type="text" id="telephone" name="telephone" placeholder="13、14、15、17、18开头的11位手机号"></td> 
  40.                             <td> 
  41.                                 <div></div> 
  42.                             </td> 
  43.                         </tr> 
  44.                         <tr> 
  45.                             <th>电子邮箱:</th> 
  46.                             <td><input type="text" id="email" name="email" placeholder="用户名@域名(域名后缀至少2个字符)"></td> 
  47.                             <td> 
  48.                                 <div></div> 
  49.                             </td> 
  50.                         </tr> 
  51.                     </table
  52.                     <div style="display: flex;justify-content: center;"
  53.                         <button type="submit" id="btn_ok">注册</button> 
  54.                     </div> 
  55.                 </form> 
  56.             </div> 
  57.         </div> 

在上面代码中,使用table标签元素表示定义一个HTML表格,tr表示表格中的行,td表示表格中的列。name表示获取对应文本的正则规则验证,placeholder属性表示提示信息。

JavaScript

1.添加事件

  1. // 获取所有input框 
  2.         var inputs = document.getElementsByTagName('input'); 
  3.         // 为每个input框添加失去焦点事件 
  4.         for (var i = 0; i < inputs.length; i++) { 
  5.             inputs[i].onblur = inputBlur; 
  6.         } 

在上面代码中,首先是获取用户注册页面所有的input元素,为每个input框添加失去焦点事件,利用for循环来添加事件处理函数inputBlur()。

2.写inputBlur()事件处理函数,该函数主要用于获取相应input元素的验证规则和提示信息,用户输入的内容进行检验,之后,把检验的结果显示在HTML页面中,代码如下所示:

  1. function inputBlur() { 
  2.             // 获取输入框的name值、value值、框中的提示信息 
  3.             var name = this.name;            
  4.             var val = this.value;  
  5.             var display = this.placeholder;    
  6.             var display_obj = this.parentNode.parentNode.children[2].children[0];  //显示提示信息 
  7.             //去掉两端空格 
  8.             val = val.trim(); 
  9.             //判断内容为空,显示提示信息 
  10.             if (!val) { 
  11.                 error(display_obj, '输入框内容不能为空'); 
  12.                 return false
  13.             } 
  14.             //获取正则匹配规则和提示信息 
  15.             var reg_msg = getRegMsg(name, display); 
  16.             //检测是否正则匹配 
  17.             if (reg_msg['reg'].test(val)) { 
  18.                 // 匹配成功 
  19.                 success(display_obj, reg_msg['msg']['success']); 
  20.             } else { 
  21.                 // 匹配失败 
  22.                 error(display_obj, reg_msg['msg']['error']); 
  23.             } 
  24.         } 

在上面代码中,变量名name、val、tips分别是获取input元素中的name、value、placeholder属性的值。

变量名tips_obj用于当input元素失去焦点的时候,显示提示信息。

val.trim()方法主要是用户输入内容中两端空格。

getRegMsg()自定义函数用来获取文本框中相对应的正则和提示信息。

test()方法用于获取当前input框输入的内容是否是正则匹配的模式,如果是则返回true,显示验证成功的信息。如果不是则返回false,显示错误的信息。

3.编写error()和success()函数分别用于验证错误信息、成功信息

  1. // 成功 
  2.         function success(obj, msg) { 
  3.             obj.className = 'success'
  4.             obj.innerHTML = msg; 
  5.         } 
  6.  
  7.         // 失败 
  8.         function error(obj, msg) { 
  9.             obj.className = 'error'
  10.             obj.innerHTML = msg + ',请重新输入'
  11.         } 

在上面代码中,obj参数表示显示提示信息的元素对象,msg参数表示自定义的错误信息。

4.获取验证规则和提示信息getRegMsg()函数

项目分析

① 用户名:长度4~12,英文大小写字母。

正则:/^[a-zA-Z]{4,12}$/。

② 密码:长度6~20,大小写字母、数字或下划线。

正则:/^.{6,20}$/。

③ 确认密码:要求与密码框一样,且两次输入相同。

正则:RegExp(‘^’ + 密码框的值 + '$')

④ 性别:

正则:/^[0-1]*$/。

⑤ 手机号码:13、14、15、17、18开头的11位手机号。

正则:/^1[34578]\d{9}$/。

⑥邮箱:用户名@域名(域名后缀至少2个字符)。

正则:/^(\w+(_|-|.)*)+@(\w+(-)?)+(.\w{2,})+$/。

代码如下所示:

  1. function getRegMsg(name, display) { 
  2.             var reg = msg = ''
  3.             switch (name) { 
  4.                 case 'user'
  5.                     reg = /^[a-zA-Z]{4,12}$/; 
  6.                     msg = {'success''用户名输入正确''error': display}; 
  7.                     break; 
  8.                 case 'passWord'
  9.                     reg = /^.{6,20}$/; 
  10.                     msg = {'success''密码输入正确''error': display}; 
  11.                     break; 
  12.                 case 'repassWord'
  13.                     var con = document.getElementsByTagName('input')[1].value; 
  14.                     reg = RegExp("^" + con + "$"); 
  15.                     msg = {'success''两次密码输入正确''error''两次输入的密码不一致'}; 
  16.                     break; 
  17.                 case 'sex'
  18.                     reg = /^[0-1]*$/; 
  19.                     msg = {'success''性别已选择''error''性别不能为空'}; 
  20.                     break; 
  21.                 case 'telephone':  
  22.                     reg=/^1[34578]\d{9}$/; 
  23.                     msg = {'success''手机号码输入正确''error': display}; 
  24.                     break; 
  25.                 case 'email'
  26.                     reg = /^(\w+(\_|\-|\.)*)+@(\w+(\-)?)+(\.\w{2,})+$/; 
  27.                     msg = {'success''邮箱输入正确''error': display}; 
  28.                     break; 
  29.             } 
  30.             return {'reg': reg, 'msg': msg}; 
  31.         } 

在上面代码中, "/^[a-zA-Z]{4,12}$/"表示匹配只包含大小写的英文字母;

"/^.{6,20}$/"表示匹配由大小写英文字母、数字或下划线长度在6-20范围内;

"RegExp("^" + con + "$")"表示获取用户输入的密码,把它作为检验确认密码是否正确的正则匹配模式;

" /^[0-1]*$/"表示数字1为男,数字0为女;

"/^1[34578]\d{9}$/"表示11位数的手机号码,以1开头,第二个数字可以是(3、4、5、7、8)其中的一个数字,剩下数字可以0-9之间任意数字;

"/^(\w+(_|-|.)*)+@(\w+(-)?)+(.\w{2,})+$/"表示匹配邮箱地址,它有三部分,分别是用户名、”@“、邮箱域名。

效果图如下所示:

 

本文案例参考《JavaScript前端开发案例教程》,黑马程序员编著

五、总结

1.本文基于JavaScript基础,实现表单验证的功能。对每一个div层、table、tr、td标签元素进行详解,让读者更好的理解。

2.在JavaScript中首先是表单项添加失去焦点处理,事件处理函数为inputBlur()。该函数用于获取表单name、value及提示信息后,去除空白后,若内容为空调用error()给出提示,否则进行验证。

3.代码没有那么复杂,希望对你有所帮助!

 

责任编辑:姜华 来源: 前端进阶学习交流
相关推荐

2021-04-02 10:01:00

JavaScript前端Web项目

2021-07-14 09:00:00

JavaFX开发应用

2020-05-15 08:07:33

JWT登录单点

2023-04-26 12:46:43

DockerSpringKubernetes

2022-12-07 08:42:35

2011-01-06 10:39:25

.NET程序打包

2009-11-09 14:57:37

WCF上传文件

2021-08-02 07:35:19

Nacos配置中心namespace

2011-01-10 14:41:26

2011-05-03 15:59:00

黑盒打印机

2022-02-17 10:26:17

JavaScript扫雷游戏前端

2011-04-21 10:32:44

MySQL双机同步

2021-01-19 09:06:21

MysqlDjango数据库

2022-07-22 12:45:39

GNU

2022-10-30 10:31:42

i2ccpuftrace

2021-12-15 08:49:21

gpio 子系统pinctrl 子系统API

2021-08-18 07:29:41

密码验证 PAT

2022-07-27 08:16:22

搜索引擎Lucene

2022-03-14 14:47:21

HarmonyOS操作系统鸿蒙

2022-01-08 20:04:20

拦截系统调用
点赞
收藏

51CTO技术栈公众号