当前位置：首页 > 全部内容 > 正文

原生JS实现表单验证：从基础到封装

作者：纸飞机

时间：2026-10-24

浏览：641

本文详细介绍如何使用原生JavaScript实现前端表单验证功能。内容涵盖字母、数字、邮箱等常见格式的正则匹配，通过DOM操作获取元素值与状态。重点讲解submit提交事件与input事件委托的应用，以及如何封装通用验证函数以提高代码复用性，避免重复编写逻辑。

文章目录

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

在开发过程中，建议逐步分析功能需求并逐一实现，这样有助于保持代码逻辑的清晰性。

第一步，获取表单容器元素及具体的文本框元素，代码如下：


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

第二步，为表单容器绑定submit提交事件，以便在用户点击提交按钮时触发验证逻辑。


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

本实例要求：若验证通过，则弹出成功提示；若验证失败，则光标自动定位至文本框，并在其后显示具体的失败原因。接下来详细解析提交事件处理函数中的具体实现步骤。

第三步，在事件处理函数内部声明必要的变量，并获取文本框当前的输入值。其中，bPass变量用于标记验证是否通过；sPrompt变量用于存储提示信息；sValue变量用于保存文本框的值。具体实现如下：


eFormContainer.addEventListener('submit',function(event){
 var bPass = false;
 var sPrompt = '';
 var sValue = eVerifyEn.value;
});

第四步，检查文本框是否为空。判断sValue是否为空字符串，如果是，则在文本框后方显示提示信息，激活（focus）该文本框，并阻止后续的默认提交行为及代码执行。代码示例如下：


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;
 }
 
});

第五步，判断输入值是否符合预设规则，即仅包含英文字母且不含其他字符。此处声明一个正则表达式，用于检测字符串是否完全由英文字母组成。代码如下：


eFormContainer.addEventListener('submit',function(){
 /* ... */
 
 //声明正则，并判断字符串是否都是英文字母
 let reg = /^[a-zA-Z]+$/;
 bPass = reg.test(sValue);
 
});

第六步，根据正则表达式的判断结果，执行通过验证或阻止提交的逻辑分支。


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();
 }
 
});

第七步，当用户在文本框中输入内容时，应当清除之前显示的提示信息。实现方式如下：


//在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>

接着修改JavaScript代码逻辑：

第一步，获取表单元素以及页面上所有的文本框元素，代码如下：


// 获取表单元素
 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');

第二步，封装一个通用的验证函数，该函数接收三个参数：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;
 }
}

第三步，在表单元素上重新绑定提交事件，以适配新的封装逻辑，代码如下：


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();
 }
 
});

此外，还需解决一个问题：当用户在文本框中输入内容时，应自动删除原有的错误提示，否则用户输入正确后仍显示错误提示会显得不合逻辑。

第四步，在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提交表单事件，而在当前的实际Web开发环境中，直接提交表单的做法已较少使用。特此说明，旨在避免误导读者。

以上就是原生JS实现表单验证功能的详细内容，更多关于JS表单验证的资料请关注本站其它相关文章！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS动态构建复杂嵌套JSON对象的方法

JS负数取余为什么是负数？详解余数与模运算区别

JS 解压出现乱码或报错怎么解决？

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

JS解析Excel后怎么将数据转换为JSON格式

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法