原生js 实现表单验证功能


Posted in Javascript onFebruary 08, 2021

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

此时效果如图所示:

原生js 实现表单验证功能

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

添加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 实现表单验证功能的详细内容,更多关于js 表单验证的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
javascript类型转换示例
Apr 29 Javascript
七夕情人节丘比特射箭小游戏
Aug 20 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 #Javascript
JavaScript实现点击出现子菜单效果
Feb 08 #Javascript
深入理解javascript中的this
Feb 08 #Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
js基于canvas实现时钟组件
Feb 07 #Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 #Javascript
You might like
php at(@)符号的用法简介
2009/07/11 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python实现取余操作的简单实例
2020/08/16 Python
彻底搞懂python 迭代器和生成器
2020/09/07 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
一封普通求职者的求职信
2013/11/20 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
个人查摆剖析材料
2014/10/04 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android