原生javascript表单验证实例教程

我会带着你远行 2023-07-21 06:12 16阅读 0赞

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

学习本教程之前，读者需要具备html和css技能，同时需要有简单的javascript基础。

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

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

作为一个前端，完成任何一个作品之前，都应该尽量让其美观一些。你可以根据自己的喜好编写样式，也可以直接复制下面的样式：

.form_Box{ 
        width:800px;
        margin:30px auto;
      }
      .form_Box dt{ 
        float:left;
        width:120px;
        line-height:36px;
        text-align:right;
        font-size:14px;
      }
      .form_Box dd{ 
        margin-left:130px;
        line-height:36px;
      }
      .form_Box input[type=text],.form_Box input[type=password]{ 
        height:30px;
        width:220px;
        line-height:28px;
        padding:0 5px;
        border:1px solid #bbb;
        border-radius:4px;
        outline:none;;
      }
      .form_Box input:focus{ 
        border-color:#2D9AFF;
        box-shadow:0 0 6px #7ABFFF;
      }
      .form_Box input+span{ 
        color:#c00;
        font-size:12px;
        margin-left:10px;
      }
      .form_Box .btn{ 
        padding:0 20px;
        color:#fff;
        cursor:pointer;
        line-height:30px;
        border:none;
        margin-right:20px;
        font-size:14px;
        background:#108ee9;
        border-radius:4px;
      }

嗯，这样看起来舒服很多。现在可以开始使用原生js来实现验证功能了。开发的时候，一步一步完成功能，可以保持清晰的思路。

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

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

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

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

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

1.  在提交事件函数中，声明相关变量并获取文本框的值。bPass变量用于判断是否可通过验证；sPrompt变量是提示文字；sValue变量是文本框的值。

var bPass = false;
      var sPrompt = '';
      var sValue = eVerifyEn.value;

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

if(sValue.trim()==''){ 
        //修改提示文字
        sPrompt = '英文字母不能为空!';
        //光标定位到字母文本框
        eVerifyEn.focus();
        //在文本框后显示提示文字
        //获取文本框父元素
        let eParent = eVerifyEn.parentElement;
        //获取文本框后的span元素
        let eSpan = eParent.getElementsByTagName('span')[0];
        //在span元素中添加提示
        eSpan.innerHTML = sPrompt;
        //阻止表单提交
        event.preventDefault();
        //阻止后续代码的执行
        return; 
      }

1.  判断输入的值是否符合规则，即只有英文字母没有其他字符。在这里声明一个正则表达式，用于判断是否都是英文字母。关于正则表达式我会写一个专门的教程，这里就不作详述了，如下所示：

let reg = /^[a-zA-Z]+$/;
      bPass = reg.test(sValue);

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

if(bPass){ 
        //通过验证弹出提示
        alert('通过验证');
      }else{ 
        //修改提示文字
        sPrompt = '只能输入英文字母!';
        //光标定位到字母文本框
        eVerifyEn.focus();
        //在文本框后显示提示文字
        //获取文本框父元素
        let eParent = eVerifyEn.parentElement;
        //获取存放提示的span元素
        let eSpan = eParent.getElementsByTagName('span')[0];
        //在span元素中添加提示
        eSpan.innerHTML = sPrompt;
        //阻止表单提交
        event.preventDefault();
      }

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

//在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 = '';
      });

此时的完整代码如下：

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

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步不变，还是给表单元素绑定提交事件。

第3步只需要声明bPass变量，提示文字和文本框值不需要在这里获取。

1.  在绑定事件函数外，封装一个验证函数，传入三个参数：elem为文本框元素，reg为正则表达式，text为提示关键字。

function fnVerify(elem,reg,text){ 
    
      }

验证函数中，需要进行两个验证，第一是验证是否为空，第二是验证输入的字符是否符合规则。验证通过返回true，否则激活当前文本框，在文本框后显示提示文字，并返回false。看下在验证函数中，具体怎么实现。

4.1 获取文本框输入的字符串和文本框后的提示元素

//获取文本框输入的字符
      var sValue = elem.value;
      //获取文本框父元素
      let eParent = elem.parentElement;
      //获取存放提示的span元素
      let eSpan = eParent.getElementsByTagName('span')[0];

4.2 阻止提交空字符

//判断文本框字符是否为空
      if(sValue.trim()==''){ 
        //光标定位到文本框
        elem.focus();
        //在文本框后显示提示文字
        eSpan.innerHTML = text + '不能为空!';
        //返回false
        return false;
      }

4.3 根据reg参数的正则表达式,判断是否符合规则

// 判断字符串是否符合规则
      if(reg.test(sValue)){ 
        //如果符合，返回true
        return true;
      }else{ 
        //光标定位到文本框
        elem.focus();
        //在文本框后显示提示文字
        eSpan.innerHTML = text + '格式不正确!';
        //不符合则返回false
        return false;
      }

1.  除确认密码外的每一个文本框都添加验证，用&&保证每一个验证都正确才通过。

//逐个验证文本框格式
      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}$/,'密码');

1.  确认密码要与密码一致，单独加一个验证。

if(eVerifyPwd.value !== eVerifyForPwd.value){ 
        //获取确认密码父元素
        let eParent = eVerifyForPwd.parentElement;
        //获取提示span元素
        let eSpan = eParent.getElementsByTagName('span')[0];
        //提示错误
        eSpan.innerHTML = '确认密码要和密码保持一致';
        //阻止后续操作
        bPass = false;
      }

1.  根据bPass变量通过验证或阻止表单提交

if(bPass){ 
        //通过验证弹出提示
        alert('通过验证');
      }else{ 
        //阻止表单提交
        event.preventDefault();
      }

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

1.  在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 = '';
      });

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