原生js制作表单验证的方法是什么

这篇文章将为大家详细讲解有关原生js制作表单验证的方法是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司是一家集网站建设,鼓楼企业网站建设,鼓楼品牌网站建设,网站定制,鼓楼网站建设报价,网络营销,网络优化,鼓楼网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

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

基本的表单验证包括如:字母验证、数字验证、字母和数字验证、汉字验证、密码验证、日期验证、手机验证、邮箱验证,密码验证等。

现在就来完成这些验证代码的编写,先来看字母是怎么验证的。先编写需要的html代码,创建一个id为formContainer的表单元素,在里面加入需要验证英文字母的文本框和按钮,文本框后面需要一个span元素存放提示文字。如下所示:

 
  
英文字母:
  
  
      
 
 

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

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制作表单验证的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:原生js制作表单验证的方法是什么
浏览路径:http://myzitong.com/article/iepecp.html