原生js制作表单验证，基本的表单验证方法

表单验证是web前端最常见的功能之一，也属于前端开发的基本功。自己完成一个表单验证的开发，也有助于加深对字符串处理和正则表达式的理解。

基本的表单验证包括如：字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码验证等。

现在就来完成这些验证代码的编写，先来看字母是怎么验证的。先编写需要的html代码，创建一个id为formContainer的表单元素，在里面加入需要验证英文字母的文本框和按钮，文本框后面需要一个span元素存放提示文字。如下所示：

  <form action="" class="form_Box" id="formContainer">

    <dl>

      <dt>英文字母：</dt>

      <dd><input type="text" id="verifyEn"><span></span></dd>

      <dd>

        <input type="submit" value="提交" class="btn submit">

        <input type="reset" value="重置" class="btn reset">

      </dd>

    </dl>

  </form>

开发的时候，一步一步分析功能再去实现，可以保持清晰的思路。

1. 获取表单元素及文本框元素，如下所示：

var eFormContainer = document.getElementById('formContainer');

var eVerifyEn = document.getElementById('verifyEn');

2. 给表单元素绑定提交事件，用于点击提交按钮时，进行验证。

eFormContainer.addEventListener('submit',function(event){

});

本实例要求当通过验证时，弹出提示通过验证；如果验证没有通过时，光标定位到文本框，并在文本框后显示验证失败的提示。接下来看下在提交事件函数中，具体怎么样做。

3. 先在函数中声明相关变量并获取文本框的值。bPass变量用于判断是否可通过验证；sPrompt变量是提示文字；sValue变量是文本框的值。如下所示：

eFormContainer.addEventListener('submit',function(event){

  var bPass = false;

  var sPrompt = '';

  var sValue = eVerifyEn.value;

});

4. 不允许文本框为空。判断sValue是不是空字符串，如果是则在文本框后显示提示，并且激活文本框，还需要阻止后续操作和默认行为，代码如下：

eFormContainer.addEventListener('submit',function(){

    /* ... */

    if(sValue.trim()==''){

        //修改提示文字

        sPrompt = '英文字母不能为空!';

        //光标定位到字母文本框

        eVerifyEn.focus();

        //在文本框后显示提示文字

        //获取文本框父元素

        let eParent = eVerifyEn.parentElement;

        //获取存放提示的span元素

        let eSpan = eParent.getElementsByTagName('span')[0];

        //在span元素中添加提示

        eSpan.innerHTML = sPrompt;

        //阻止表单提交

        event.preventDefault();

        //阻止后续代码的执行

        return;

  }

});

5. 判断输入的值是否符合规则，即只有英文字母没有其他字符。在这里声明一个正则表达式，用于判断是否都是英文字母。如下所示：

eFormContainer.addEventListener('submit',function(){

    /* ... */

    //声明正则，并判断字符串是否都是英文字母

    let reg = /^[a-zA-Z]+$/;

    bPass = reg.test(sValue);

});

6. 根据正则判断结果，执行通过或阻止提交。

eFormContainer.addEventListener('submit',function(){

    /* ... */

    if(bPass){

        //通过验证弹出提示

        alert('通过验证');

    }else{

        //修改提示文字

        sPrompt = '只能输入英文字母!';

        //光标定位到字母文本框

        eVerifyEn.focus();

        //在文本框后显示提示文字

        //获取文本框父元素

        let eParent = eVerifyEn.parentElement;

        //获取存放提示的span元素

        let eSpan = eParent.getElementsByTagName('span')[0];

        //在span元素中添加提示

        eSpan.innerHTML = sPrompt;

        //阻止表单提交

        event.preventDefault();

    }

});

7. 在文本框输入内容的时候，应该要删除后面的提示，如下所示：

  //在eFormContainer元素上绑定input事件，把所有文本框的input事件都委托给eFormContainer元素，

  // 这样做的好处就是不需要给每一个文本框都添加事件。

  eFormContainer.addEventListener('input',function(event){

    //获取当前文本框

    let eInput = event.target;

    //获取文本框父元素

    let eParent = eInput.parentElement;

    //获取存放提示的span元素

    let eSpan = eParent.getElementsByTagName('span')[0];

    //清空提示

    eSpan.innerHTML = '';

  });

此时的完整javascript代码如下：

  function fnFormVerify(){

    // 获取表单元素

    var eFormContainer = document.getElementById('formContainer');

    // 获取验证字母文本框

    var eVerifyEn = document.getElementById('verifyEn');

    // 给表单元素绑定提交事件

    eFormContainer.addEventListener('submit',function(){

      // 声明bPass变量，用于判断是否通过验证

      var bPass = false;

      // 声明sPrompt变量，用于提示文字

      var sPrompt = '';

      // 获取字母文本框的值，保证其不等于空，再判断值中是否包含非英文字母，代码如下：

      var sValue = eVerifyEn.value;

      //保证其不等于空

      if(sValue.trim()==''){

        //修改提示文字

        sPrompt = '英文字母不能为空!';

        //光标定位到字母文本框

        eVerifyEn.focus();

        //在文本框后显示提示文字

        //获取文本框父元素

        let eParent = eVerifyEn.parentElement;

        //获取存放提示的span元素

        let eSpan = eParent.getElementsByTagName('span')[0];

        //在span元素中添加提示

        eSpan.innerHTML = sPrompt;

        //阻止表单提交

        event.preventDefault();

        //阻止后续代码的执行

        return;

      }

      //声明正则，并判断字符串是否都是英文字母

      let reg = /^[a-zA-Z]+$/;

      bPass = reg.test(sValue);

      if(bPass){

        //通过验证弹出提示

        alert('通过验证');

      }else{

        //修改提示文字

        sPrompt = '只能输入英文字母!';

        //光标定位到字母文本框

        eVerifyEn.focus();

        //在文本框后显示提示文字

        //获取文本框父元素

        let eParent = eVerifyEn.parentElement;

        //获取存放提示的span元素

        let eSpan = eParent.getElementsByTagName('span')[0];

        //在span元素中添加提示

        eSpan.innerHTML = sPrompt;

        //阻止表单提交

        event.preventDefault();

      }

    });

    //在eFormContainer元素上绑定input事件，把所有文本框的input事件都委托给eFormContainer元素，

    // 这样做的好处就是不需要给每一个文本框都添加事件。

    eFormContainer.addEventListener('input',function(event){

      //获取当前文本框

      let eInput = event.target;

      //获取文本框父元素

      let eParent = eInput.parentElement;

      //获取存放提示的span元素

      let eSpan = eParent.getElementsByTagName('span')[0];

      //清空提示

      eSpan.innerHTML = '';

    });

  }

  fnFormVerify();

此时效果如图所示：

随后我们还需要完成数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证，密码等。如果每一次验证都这么写的话，会很繁琐，而且代码也会比较多。所以需要封装一个字符串验证的函数，返回验证结果。在提交的时候再每一个文本框依次调用。

添加html元素如下：

<form action="" class="form_Box" id="formContainer">

  <dl>

    <dt>英文字母：</dt>

    <dd><input type="text" id="verifyEn"><span></span></dd>

    <dt>英文和数字：</dt>

    <dd><input type="text" id="verifyEnNum"><span></span></dd>

    <dt>数字：</dt>

    <dd><input type="text" id="verifyNum"><span></span></dd>

    <dt>汉字：</dt>

    <dd><input type="text" id="verifyCn"><span></span></dd>

    <dt>日期：</dt>

    <dd><input type="text" id="verifyDate"><span></span></dd>

    <dt>邮箱：</dt>

    <dd><input type="text" id="verifyEmail"><span></span></dd>

    <dt>手机：</dt>

    <dd><input type="text" id="verifyPhone"><span></span></dd>

    <dt>密码：</dt>

    <dd><input type="password" id="verifyPwd"><span></span></dd>

    <dt>确认密码：</dt>

    <dd><input type="password" id="verifyForPwd"><span></span></dd>

    <dt></dt>

    <dd>

      <input type="submit" value="提交" class="btn submit">

      <input type="reset" value="重置" class="btn reset">

    </dd>

  </dl>

</form>

再修改js代码：

1. 获取表单元素和所有文本框，如下所示：

  // 获取表单元素

  var eFormContainer = document.getElementById('formContainer');

  // 获取验证字母文本框

  var eVerifyEn = document.getElementById('verifyEn');

  // 获取英文和数字文本框

  var eVerifyEnNum = document.getElementById('verifyEnNum');

  // 获取数字文本框

  var eVerifyNum = document.getElementById('verifyNum');

  // 获取汉字文本框

  var eVerifyCn = document.getElementById('verifyCn');

  // 获取日期文本框

  var eVerifyDate = document.getElementById('verifyDate');

  // 获取邮箱文本框

  var eVerifyEmail = document.getElementById('verifyEmail');

  // 获取手机文本框

  var eVerifyPhone = document.getElementById('verifyPhone');

  // 获取密码文本框

  var eVerifyPwd = document.getElementById('verifyPwd');

  // 获取确认密码文本框

  var eVerifyForPwd = document.getElementById('verifyForPwd');

2.封装一个验证函数，传入三个参数：elem为文本框元素，reg为正则表达式，text为提示关键字。如下所示：

function fnVerify(elem,reg,text){

  //获取文本框输入的字符

  var sValue = elem.value;

  //获取文本框父元素

  let eParent = elem.parentElement;

  //获取存放提示的span元素

  let eSpan = eParent.getElementsByTagName('span')[0];

  //判断文本框字符是否为空

  if(sValue.trim()==''){

    //光标定位到文本框

    elem.focus();

    //在文本框后显示提示文字

    eSpan.innerHTML = text + '不能为空!';

    //返回false

    return false;

  }

  // 判断字符串是否符合规则

  if(reg.test(sValue)){

    //如果符合，返回true

    return true;

  }else{

    //光标定位到文本框

    elem.focus();

    //在文本框后显示提示文字

    eSpan.innerHTML = text + '格式不正确!';

    //不符合则返回false

    return false;

  }

}

3.在表单元素上绑定提交事件，如下所示：

eFormContainer.addEventListener('submit',function(event){

  // 声明bPass变量，用于判断是否通过验证

  var bPass = false;

  //逐个验证文本框格式

  bPass = fnVerify(eVerifyEn,/^[a-zA-Z]+$/,'英文字母') &&

          fnVerify(eVerifyEnNum,/^[a-zA-Z0-9]*$/,'英文和数字') &&

          fnVerify(eVerifyNum,/^\d*$/,'数字') &&

          fnVerify(eVerifyCn,/^[\u0391-\uFFE5]+$/,'汉字') &&

          fnVerify(eVerifyDate,/^(\d{2}|\d{4})-\d{1,2}-\d{1,2}$/,'日期') &&

          fnVerify(eVerifyEmail,/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/,'邮箱') &&

          fnVerify(eVerifyPhone,/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/,'手机') &&

          fnVerify(eVerifyPwd,/^[\w!@#$%^&*?\(\)]{6,16}$/,'密码');

  //确认密码要与密码一致，单独加一个验证

  if(eVerifyPwd.value !== eVerifyForPwd.value){

    //获取确认密码父元素

    let eParent = eVerifyForPwd.parentElement;

    //获取提示span元素

    let eSpan = eParent.getElementsByTagName('span')[0];

    //提示错误

    eSpan.innerHTML = '确认密码要和密码保持一致';

    //激活确认密码输入框

    eVerifyForPwd.focus();

    //阻止后续操作

    bPass = false;

  }

  if(bPass){

    //通过验证弹出提示

    alert('通过验证');

    event.preventDefault(); //实际工作不能有此行，在这里是为了阻止表单默认行为。

  }else{

    //阻止表单提交

    event.preventDefault();

  }

});

还有一个问题需要解决，在文本框输入内容的时候，都应该删除后面的提示，不然输入正确还提示错误这不正常。

4. 在eFormContainer元素上绑定input事件，用于输入时删除提示文字。

eFormContainer.addEventListener('input',function(event){

  //获取当前文本框

  let eInput = event.target;

  //获取文本框父元素

  let eParent = eInput.parentElement;

  //获取存放提示的span元素

  let eSpan = eParent.getElementsByTagName('span')[0];

  //清空提示

  eSpan.innerHTML = '';

});

写到这里，一个完整的表单验证页面基本完成了；本实例教程采用的是submit提交表单事件，而现在的实际开发中，已经很少这样直接提交表单了。特此说明，以免误导读者。

原生js制作表单验证，基本的表单验证方法的更多相关文章

利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
使用原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
原生js制作播放器
以前就想做一个播放器,一直没狠下心来,今天终于狠下心来,把这个做出来了(因为有点无聊) 做这个播放器也百度了一下, 你叫我做,我肯定做不出来, 就算用jquery 我也做不出来. 以前也用过a ...
原生js获取宽高与jquery获取宽高的方法的关系
说明:1.因为获取高度的情况跟获取宽度的情况一样,所以以下只说获取宽度的情况. 2.以下所说的所有方法与属性所返回的值都是不带单位的. 3.为了方便说明,以下情况采用缩写表示: obj -> ...
原生js制作标题与内容保持4行的效果
在制作网页或移动端有时会用到一个效果,类似文章标题和文章描述的排列总是保持一样的行数,要么标题总是一行,多出的省略,要么标题内容1:3或2:2或3:1这样,今天练习这样的效果. 实现的原理:给标题和内 ...
原生JS制作简易Tabs组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
原生JS制作验证码（优化）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
原生js制作弹出框
完整代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

The Linux Scheduler: a Decade of Wasted Cores
The Linux Scheduler: a Decade of Wasted Cores 这是一篇介绍Linux调度问题的文章,源自这篇文章.文章中涉及到的一些问题可能已经得到解决,但可以学习一下本 ...
MySQL 存储函数的创建、调用、查找
MySQL存储函数(自定义函数),函数一般用于计算和返回一个值,可以将经常需要使用的计算或功能写成一个函数 1.创建存储函数:使用 create function关键字 2.调用存储函数: 3.示例: ...
PPT技术干货1(上)——设计审美
序言 PPT直接反映了一个人的能力和态度,PPT能直接反映出老板最看重的4个关键能力: 逻辑思维:全局思考,洞察关键数据思维:数据分析,指导决策设计思维:美观大方,彰显专业工作效率:效率高,出活 ...
深入理解MySQL系列之redo log、undo log和binlog
事务的实现 redo log保证事务的持久性,undo log用来帮助事务回滚及MVCC的功能. InnoDB存储引擎体系结构 redo log Write Ahead Log策略事务提交时,先写重 ...
[leetcode]Next Greater Element
第一题:寻找子集合中每个元素在原集合中右边第一个比它大的数. 想到了用哈希表存这个数的位置,但是没有想到可以直接用哈希表存next great,用栈存还没找到的数,没遍历一个数就考察栈中的元素小,小的 ...
Spring Cloud Config应用篇（九）
一.SpringCloud Config 配置中心 1.1.配置中心说明 SpringCloud Config 服务器以下简称"配置中心". Spring Cloud Config ...
ServletContext的作用
一个项目只有一个ServletContext对象,一个tomcat有多个项目作用:在多核Servlet中来获取这个唯一的对象,使用ta给多个Servlet传递数据. 在Tomcat启动时创建,在To ...
CAP理论和BASE理论及数据库的ACID中关于一致性及不同点的思考
CAP定理又被称作是布鲁尔定理,是加州大学伯克利分销计算机科学家里克在2000年提出,是分布式理论基础. CAP:是分布式系统的理论基础 [一致性可用性分区容错性] BASE理论是对CAP中 ...
RocketMQ踩坑记
一.前言现在的主流消息队列基本都是kafka.RabbitMQ和RocketMQ,只有了解各自的优缺点才能在不同的场景选择合适的MQ,对比图如下: MQ对比图本篇文章主要介绍我自己在跑官方demo ...
Redis缓存篇（二）淘汰机制：缓存满了怎么办？
上一讲提到,缓存的容量总是小于后端数据库的.随着业务系统的使用,缓存数据会撑满内存空间,该怎么处理呢? 本节我们来学习内存淘汰机制.在Redis 4.0之前有6种内存淘汰策略,之后又增加2种,一共8种 ...

原生js制作表单验证，基本的表单验证方法

原生js制作表单验证，基本的表单验证方法的更多相关文章

随机推荐

热门专题