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

一、前言

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

创新互联专注于西华企业网站建设,响应式网站设计,商城网站开发。西华网站建设公司,为西华等地区提供建站服务。全流程定制网站设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

二、项目准备

开发工具：HBuilderX

浏览器：Google Chrome浏览器

三、项目目标

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

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

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

四、项目实现

HTML

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.             
    欢迎注册
    已有账号？登录
 
  •              
  •                  
  •                      
  •                         
    •  
  •                             
    •  
  •                             
    •  
  •                             
    •  
  •                         
    •  
  •                         
    •  
  •                             
    •  
  •                             
    •  
  •                             
    •  
  •                         
    •  
  •                         
    •  
  •                             
    •  
  •                             
    •  
  •                             
    •  
  •                         
    •  
  •                         
    •  
  •                             
    •  
  •                             
    •  
  •                             
    •  
  •                         
    •  
  •                         
    •  
  •                             
    •  
  •                             
    •  
  •                             
    •  
  •                         
    •  
  •                         
    •  
  •                             
    •  
  •                             
    •  
  •                             
    •  
  •                         
    •  
  •                     
    • 用户名称：  
  •                                  
  •                             
    		•   
  •                                 
     
  •                             
    		•
    密　　码：  
  •                                 
     
  •                             
    		•
    确认密码：  
  •                                 
     
  •                             
    		•
    性　　别： 男   
  •                                 女
    		•   
  •                                 
     
  •                             
    		•
    手机号码：  
  •                                 
     
  •                             
    		•
    电子邮箱：  
  •                                 
     
  •                             
    		•
     
  •                      
  •                         注册 
  •                     
    •  
  •                  
  •             
    •  
  •          

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

    JavaScript

    1.添加事件

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

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

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

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

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

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

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

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

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

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

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

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

    在上面代码中， "/^[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.代码没有那么复杂，希望对你有所帮助!

    分享文章：手把手教你使用JavaScript实现表单验证
    文章来源：http://www.shufengxianlan.com/qtweb/news4/497904.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站改版知识

    同城分类信息

    主机租用　　 　中国（西部）云计算中心　　 　成都广告招牌　　 　四川成都托管服务器　　 　网页设计　　 　品牌设计　　 　成都网站优化　　 　普格博源建站　　 　等级保护测评　　 　重庆外贸网站建设　　 　服务器托管　　 　不锈钢防护栏　　 　尊格展览　　 　成都响应式网站建设公司　　 　崇州网站建设　　 　达州托管服务器　　 　绵阳科技城电信IDC机房　　 　网站建设费用　　 　成都服务器托管　　 　企业网站建设公司