富贵资源网

原生js 实现表单验证功能
站长资源 2024/11/15 佚名
65 1538
富贵资源网 Design By www.hznty.com

表单验证是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]+[_|\_|\.]"htmlcode">



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 表单验证的资料请关注其它相关文章！
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com