纯javascript制作表单验证,最基本的表单验证方法

  • A+
所属分类:Web前端
摘要

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

表单验证是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();

此时效果如图所示:

纯javascript制作表单验证,最基本的表单验证方法

 

 

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

添加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提交表单事件,而现在的实际开发中,已经很少这样直接提交表单了。特此说明,以免误导读者。