首页
所有分类
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 组件之旅（三）：用 Ant 构建组件
Oct 28 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
js中replace的用法总结
Dec 27 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
JS搜狐面试题分析
Dec 16 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
vue3为什么要用proxy替代defineProperty
Oct 19 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
GZIP(2) 磁盘分区(1) FTP服务器(1) IIS7(1) 事务并发(1) .NET Framework(2) 幻读(5) DBLink(1) MVCC(4) 复读(1)
You might like
多文件上载系统完整版
2006/10/09 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
详解Vue.js iview实现树形权限表（可扩展表）
2018/09/30 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python批量处理txt文件的实例代码
2020/01/13 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
欧洲高端品牌直销店：Fashionesta
2016/08/31 全球购物
Beauty Expert美国/加拿大：购买奢侈美容产品
2018/12/05 全球购物
简述数组与指针的区别
2014/01/02 面试题
《圆明园的毁灭》教学反思
2014/02/28 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
降价通知函
2015/04/23 职场文书
婚前协议书怎么写，才具有法律效力呢 ？
2019/06/28 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL