首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 13, 2015

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

如图

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制作的简单注册模块表单验证

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript去掉前后空格的实例
Nov 07 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
JavaScript中的闭包
Feb 24 Javascript
javascript 判断页面访问方式电脑或者移动端
Sep 19 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
js中Object.create实例用法详解
Oct 05 Javascript
简化版手机端照片预览组件
Apr 13 #Javascript
javascript引用类型指针的工作方式
Apr 13 #Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 #Javascript
使用jQuery实现更改默认alert框体
Apr 13 #Javascript
javascript异步处理工作机制详解
Apr 13 #Javascript
JavaScript中DOM详解
Apr 13 #Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 #Javascript
电台(1) 电路图(1) LW(1) 天线(6) 索尼(5) 电磁辐射(1) SONY(15) 短波(1) 发报机(1) PL-880(1)
You might like
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
2016/07/01 Javascript
javascript中数组（Array)对象和字符串（String)对象的常用方法总结
2016/12/15 Javascript
从零学习node.js之详解异步控制工具async（八）
2017/02/27 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
django页面跳转问题及注意事项
2019/07/18 Python
关于python字符串方法分类详解
2019/08/20 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
CSS3实现缺角矩形，折角矩形以及缺角边框
2019/12/20 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
新西兰领先的鞋类和靴子网上商城：Merchant 1948
2017/09/08 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
幼儿园小班教学反思
2014/02/02 职场文书
机关单位人员学雷锋心得体会
2014/03/10 职场文书
个人承诺书
2014/03/26 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
2015年测量员工作总结
2015/05/23 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
python操作xlsx格式文件并读取
2021/06/02 Python
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技