原生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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
bootstrap模态框实现拖拽效果
Dec 14 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
Vue如何基于es6导入外部js文件
May 15 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
Python下线程之间的共享和释放示例
2015/05/04 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python 字符串与数字输出方法
2018/07/16 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
详解python UDP 编程
2020/08/24 Python
大学生标准推荐信范文
2013/11/25 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
安全生产检讨书
2014/01/21 职场文书
清明节扫墓活动方案
2014/03/02 职场文书
大气污染防治方案
2014/05/19 职场文书
销售口号大全
2014/06/11 职场文书
欢迎领导检查标语
2014/06/27 职场文书
股东出资证明书范例
2014/10/04 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年绿化工作总结
2014/12/09 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL