首页前端开发JavaScript原生js 实现表单验证功能

原生js 实现表单验证功能

时间2024-01-31 20:56:03发布访客分类JavaScript浏览663
导读：收集整理的这篇文章主要介绍了原生js 实现表单验证功能，觉得挺不错的，现在分享给大家，也给大家做个参考。 目录开发的时候，一步一步分析功能再去实现，可以保持清晰的思路。1. 获取表单元素...
收集整理的这篇文章主要介绍了原生js 实现表单验证功能，觉得挺不错的，现在分享给大家，也给大家做个参考。
目录
  • 开发的时候，一步一步分析功能再去实现，可以保持清晰的思路。
    • 1. 获取表单元素及文本框元素，如下所示：
    •  2. 给表单元素绑定提交事件，用于点击提交按钮时，进行验证。
    •  3. 先在函数中声明相关变量并获取文本框的值。bPass变量用于判断是否可通过验证；sPrompt变量是提示文字；sValue变量是文本框的值。如下所示：
    •  4. 不允许文本框为空。判断sValue是不是空字符串，如果是则在文本框后显示提示，并且激活文本框，还需要阻止后续操作和默认行为，代码如下：
    • 5. 判断输入的值是否符合规则，即只有英文字母没有其他字符。在这里声明一个正则表达式，用于判断是否都是英文字母。如下所示：
    • 6. 根据正则判断结果，执行通过或阻止提交。
    • 7. 在文本框输入内容的时候，应该要删除后面的提示，如下所示：
  • 再修改js代码：
    • 1. 获取表单元素和所有文本框，如下所示：
    • @L_304_10@
    • 3.在表单元素上绑定提交事件，如下所示：
    • 4. 在eFormContainer元素上绑定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>

开发的时候，一步一步分析功能再去实现，可以保持清晰的思路。

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

此时效果如图所示：

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

添加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实现表单验证功能
  • php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
  • JS使用正则表达式实现常用的表单验证功能分析
  • laravel框架使用FormRequest进行表单验证，验证异常返回JSON操作示例
  • JS简单表单验证功能完整示例
  • 分享JS表单验证源码（带错误提示及密码等级）
  • JavaScript使用表单元素验证表单的示例代码
  • vue.js表单验证插件(vee-validate)的使用教程详解
  • 使用vue自定义指令开发表单验证插件validate.js

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

js表单验证

若转载请注明出处： 原生js 实现表单验证功能
本文地址： https://pptw.com/jishu/594468.html
c语言中定义结构体的保留字是什么？ js面向对象封装级联下拉菜单列表的实现步骤

游客 回复需填写必要信息
↑