javascript制作的简单注册模块表单验证

更新时间：2015年04月13日 10:53:22 投稿：hebedich

通常在我们的HTML页面表单中有大量的数据验证工作，免不了要写很多验证表单的js代码，这是一项非常繁琐枯燥的工作。很多程序员也会经常遗漏这项工作。所以写了这一段JavaScript代码提供给大家使用。使用起来很简单，大家拿回去自由扩展吧

一个注册框进行表单验证处理

如图

有简单的验证提示功能

代码思路也比较简单

输入框失去焦点时便检测，并进行处理

表单具有 onsubmit = "return check()"行为，处理验证情况

点击提交表单按钮时，进行最终的验证，达到是否通过表单提交的请求。

先是最基本的html+css部分

 <style type="text/css">
   body{margin:0;padding: 0;}
   .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
   .login legend{font-weight: bold;color: green;text-align: center;}
   .login label{display:inline-block;width:130px;text-align: right;}
   .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
   input{height: 20px;width: 170px;}
   .borderRed{border: 2px solid red;}
   img{display: none;}
 </style>
 </head>
 <body>
   <div class="login">
     <form name="form" method="post" action="register.php" onsubmit="return check()">
       <legend>【Register】</legend>
       <p><label for="name">UserName: </label>
       <input type="text" id="name" >
       <img src="./img/gou.png" width="20px" height="20px"></p>
       <p><label for="password">Password: </label>
       <input type="password" id="password" >
       <img src="./img/gantan.png" width="20px" height="20px"></p>
       <p><label for="R_password">Password Again: </label>
       <input type="password" id="R_password" >
       <img src="./img/gou.png" width="20px" height="20px"></p>
       <p><label for="email">Email: </label>
       <input type="text" id="email" >
       <img src="./img/gou.png" width="20px" height="20px"></p>
       <p><input type="submit" value="Register" class="btn"></p>
     </form>
   </div>

然后是js的class相关处理函数

  function hasClass(obj,cls){  // 判断obj是否有此class
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
  }
  function addClass(obj,cls){ //给 obj添加class
    if(!this.hasClass(obj,cls)){ 
      obj.className += " "+cls;
    }
  }
  function removeClass(obj,cls){ //移除obj对应的class
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
      obj.className = obj.className.replace(reg," ");
    }
  }

然后是验证各个输入框的值

 function checkName(name){  //验证name
    if(name != ""){ //不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
      removeClass(ele.name,"borderRed"); //移除class
      document.images[0].setAttribute("src","./img/gou.png"); //对应图标
      document.images[0].style.display = "inline"; //显示
      return true;
    }else{ //name不符合
      addClass(ele.name,"borderRed"); //添加class
      document.images[0].setAttribute("src","./img/gantan.png"); //对应图标
      document.images[0].style.display = "inline"; //显示
      return false;
    }
  }
  function checkPassw(passw1,passw2){ //验证密码
    if(passw1 == "" || passw2 == "" || passw1 !== passw2){ //两次密码输入不为空且不等 不符合
      addClass(ele.password,"borderRed");
      addClass(ele.R_password,"borderRed");
      document.images[1].setAttribute("src","./img/gantan.png");
      document.images[1].style.display = "inline";
      document.images[2].setAttribute("src","./img/gantan.png");
      document.images[2].style.display = "inline";
      return false;
    }else{  //密码输入正确
      removeClass(ele.password,"borderRed");
      removeClass(ele.R_password,"borderRed");
      document.images[1].setAttribute("src","./img/gou.png");
      document.images[1].style.display = "inline";
      document.images[2].setAttribute("src","./img/gou.png");
      document.images[2].style.display = "inline";
      return true;
    }
  }
  function checkEmail(email){  //验证邮箱
    var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
    if(!pattern.test(email)){ //email格式不正确
      addClass(ele.email,"borderRed");
      document.images[3].setAttribute("src","./img/gantan.png");
      document.images[3].style.display = "inline";
      ele.email.select();
      return false;
    }else{ //格式正确
      removeClass(ele.email,"borderRed");
      document.images[3].setAttribute("src","./img/gou.png");
      document.images[3].style.display = "inline";
      return true;
    }
  }

然后为各个输入框添加监听事件：

  var ele = { //存放各个input字段obj
      name: document.getElementById("name"),
      password: document.getElementById("password"),
      R_password: document.getElementById("R_password"),
      email: document.getElementById("email")
    };
    ele.name.onblur = function(){ //name失去焦点则检测
      checkName(ele.name.value);
    }
    ele.password.onblur = function(){ //password失去焦点则检测
      checkPassw(ele.password.value,ele.R_password.value);
    }
    ele.R_password.onblur = function(){ //R_password失去焦点则检测
      checkPassw(ele.password.value,ele.R_password.value);
    }
    ele.email.onblur = function(){ //email失去焦点则检测
      checkEmail(ele.email.value);
    }

最后就是点击提交注册时调用的check()函数了

function check(){  //表单提交则验证开始
    var ok = false;
    var nameOk = false;
    var emailOk = false;
    var passwOk = false;
    
    if(checkName(ele.name.value)){ nameOk = true; }  //验证name
    if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password
    if(checkEmail(ele.email.value)){ emailOk = true; }  //验证email

    if(nameOk && passwOk && emailOk){ 
      alert("Tip: Register Success ..");  //注册成功
      //return true; 
    }
    return false;  //有误，注册失败
  }

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Register</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
  body{margin:0;padding: 0;}
  .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
  .login legend{font-weight: bold;color: green;text-align: center;}
  .login label{display:inline-block;width:130px;text-align: right;}
  .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
  input{height: 20px;width: 170px;}
  .borderRed{border: 2px solid red;}
  img{display: none;}
</style>
</head>
<body>
  <div class="login">
    <form name="form" method="post" action="register.php" onsubmit="return check()">
      <legend>【Register】</legend>
      <p><label for="name">UserName: </label>
      <input type="text" id="name" >
      <img src="./img/gou.png" width="20px" height="20px"></p>
      <p><label for="password">Password: </label>
      <input type="password" id="password" >
      <img src="./img/gantan.png" width="20px" height="20px"></p>
      <p><label for="R_password">Password Again: </label>
      <input type="password" id="R_password" >
      <img src="./img/gou.png" width="20px" height="20px"></p>
      <p><label for="email">Email: </label>
      <input type="text" id="email" >
      <img src="./img/gou.png" width="20px" height="20px"></p>
      <p><input type="submit" value="Register" class="btn"></p>
    </form>
  </div>
  <script type="text/javascript">
  function hasClass(obj,cls){  // 判断obj是否有此class
    return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
  }
  function addClass(obj,cls){ //给 obj添加class
    if(!this.hasClass(obj,cls)){ 
      obj.className += " "+cls;
    }
  }
  function removeClass(obj,cls){ //移除obj对应的class
    if(hasClass(obj,cls)){ 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
      obj.className = obj.className.replace(reg," ");
    }
  }


  function checkName(name){  //验证name
    if(name != ""){ //不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
      removeClass(ele.name,"borderRed"); //移除class
      document.images[0].setAttribute("src","./img/gou.png"); //对应图标
      document.images[0].style.display = "inline"; //显示
      return true;
    }else{ //name不符合
      addClass(ele.name,"borderRed"); //添加class
      document.images[0].setAttribute("src","./img/gantan.png"); //对应图标
      document.images[0].style.display = "inline"; //显示
      return false;
    }
  }
  function checkPassw(passw1,passw2){ //验证密码
    if(passw1 == "" || passw2 == "" || passw1 !== passw2){ //两次密码输入不为空且不等 不符合
      addClass(ele.password,"borderRed");
      addClass(ele.R_password,"borderRed");
      document.images[1].setAttribute("src","./img/gantan.png");
      document.images[1].style.display = "inline";
      document.images[2].setAttribute("src","./img/gantan.png");
      document.images[2].style.display = "inline";
      return false;
    }else{  //密码输入正确
      removeClass(ele.password,"borderRed");
      removeClass(ele.R_password,"borderRed");
      document.images[1].setAttribute("src","./img/gou.png");
      document.images[1].style.display = "inline";
      document.images[2].setAttribute("src","./img/gou.png");
      document.images[2].style.display = "inline";
      return true;
    }
  }
  function checkEmail(email){  //验证邮箱
    var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
    if(!pattern.test(email)){ //email格式不正确
      addClass(ele.email,"borderRed");
      document.images[3].setAttribute("src","./img/gantan.png");
      document.images[3].style.display = "inline";
      ele.email.select();
      return false;
    }else{ //格式正确
      removeClass(ele.email,"borderRed");
      document.images[3].setAttribute("src","./img/gou.png");
      document.images[3].style.display = "inline";
      return true;
    }
  }


  var ele = { //存放各个input字段obj
      name: document.getElementById("name"),
      password: document.getElementById("password"),
      R_password: document.getElementById("R_password"),
      email: document.getElementById("email")
    };
    ele.name.onblur = function(){ //name失去焦点则检测
      checkName(ele.name.value);
    }
    ele.password.onblur = function(){ //password失去焦点则检测
      checkPassw(ele.password.value,ele.R_password.value);
    }
    ele.R_password.onblur = function(){ //R_password失去焦点则检测
      checkPassw(ele.password.value,ele.R_password.value);
    }
    ele.email.onblur = function(){ //email失去焦点则检测
      checkEmail(ele.email.value);
    }

  function check(){  //表单提交则验证开始
    var ok = false;
    var nameOk = false;
    var emailOk = false;
    var passwOk = false;
    
    if(checkName(ele.name.value)){ nameOk = true; }  //验证name
    if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password
    if(checkEmail(ele.email.value)){ emailOk = true; }  //验证email

    if(nameOk && passwOk && emailOk){ 
      alert("Tip: Register Success ..");  //注册成功
      //return true; 
    }
    return false;  //有误，注册失败
  }
  </script>
</body>
</html>

以上所述就是本文的全部内容了，希望能够对大家学习javascript表单验证有所帮助。

您可能感兴趣的文章:

详解开源的JavaScript插件化框架MinimaJS
这篇文章主要介绍了开源的JavaScript插件化框架MinimaJS的详解,详细的介绍了MinimaJS的使用，具有一定的参考价值，有兴趣的可以了解一下
2017-10-10
详解web如何改变主题配色方法示例
这篇文章主要为大家介绍了web如何改变主题配色方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
javascript实现根据身份证号读取相关信息
这篇文章主要介绍了javascript实现根据身份证号读取相关信息,需要的朋友可以参考下
2014-12-12
Echarts直角坐标系x轴y轴属性设置整理大全
直角坐标系的设置指的是网格,坐标轴和区域缩放的配置,下面这篇文章主要给大家介绍了关于Echarts直角坐标系x轴y轴属性设置的相关资料,需要的朋友可以参考下
2022-11-11
深入学习JavaScript中的promise
这篇文章主要介绍了深入学习JavaScript中的promise，Promise对象的主要⽤途是通过链式调⽤的结构，将原本回调嵌套的异步处理流程，转化成“对象.then().then()...”的链式结构
2022-06-06
Bootstrap CSS组件之面包屑导航(breadcrumb)
这篇文章主要为大家详细介绍了Bootstrap CSS组件之面包屑导航(breadcrumb)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Web制作验证码功能实例代码
web开发中，经常会使用验证码功能，例如登录、注册，或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码，感兴趣的朋友一起看看吧
2017-06-06
JavaScript声明函数的5种方法小结
本文主要介绍了JavaScript声明函数的5种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
基于javascript实现漂亮的页面过渡动画效果附源码下载
本文通过javascript实现漂亮的页面过滤动画效果，用户通过点击页面左侧的菜单，对应的页面加载时伴随着滑动过滤动画，并带有进度条效果。用户体验度非常好，感兴趣的朋友一起看看吧
2015-10-10
d3绘制基本的柱形图的实现代码
柱形图是图表中常见的一种，这篇文章主要介绍了d3绘制基本的柱形图的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12