安科网

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

qiukui00

qiukui00

2019-04-26

关注 关注

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

如图

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 label html表单

qiukui00

qiukui00

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

jQuery实现高度灵活的表单验证功能示例【无UI】

本文实例讲述了jQuery实现高度灵活的表单验证功能。分享给大家供大家参考，具体如下：。表单验证是前端开发过程中常见的一个需求，产品需求、业务逻辑的不同，表单验证的方式方法也有所区别。而最重要的是我们要清楚，表单验证的核心原则是――错误信息提示准确，并且尽

85443563 2020-04-30

HTML表单

Action ：规定提交表单时，向何处发送数据Method ：规定提交表单所使用的HTTP方法。　　GET 最适合少量数据的提交。浏览器会设定容量限制。目前只有 Safari 8 支持 tel 类型　　URL ：用于应该包含 URL 地址的输入字段。

nercon 2020-07-26

Laravel5.1 框架表单验证操作实例详解

本文实例讲述了Laravel5.1 框架表单验证操作。分享给大家供大家参考，具体如下：。当我们提交表单时 通常会对提交过来的数据进行一些验证、Laravel在Controller类中使用了一个traint：ValidatesRequest。方便我们在控制器

WangJiangNan 2020-01-07

python框架-django中的表单类

def form_test_view:　　 # 如果是post请求，将数据绑定到表单，直接存储在request.POST中，取值普通表单一样。# 检验数据的有效性　　　　　　　# 验证过的数据可以通过 form.cleaned_data取得，格式是一个字典

typhoonpython 2019-11-03

JavaScript使用表单元素验证表单

网站最基础的就是注册,它是一个系统的交互基础.因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck(). eg.regCheck()函数需要添加的行为

renpinghao 2019-11-03

JQ 表单验证

//如果是必填的，则加红星标识.var $required = $; //创建元素。var errorMsg = '请输入至少6位的用户名.';var okMsg = '输入正确.';//提交，最终验证。

谷歌架构师 2016-04-15

jQuery validate验证表单隐藏域

function validInfoForm(){ return $.validate({ ignore : "",//验证隐藏域,解决切换标签后隐藏域无法验证问题 rules: { oldPassword: { requi

tztzyzyz 2020-07-20

HTML5中修改表单验证默认提示语句

HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的

nercon 2020-07-16

表单校验及正则表达式

语法：var reg=/表达式/附加参数;

leap 2020-07-05

Flask表单

在web程序中，表单是与用户交互的最常见的方式之一。用户注册、登录、撰写文章。不过，表单的处理却并不简单。你不仅要创建表单，验证用户输入的内容，向用户显示错误提示，还要获取并保存数据。幸运的是，强大的WTForms可以帮我们解决这些问题。WTForms是一

hzyuhz 2020-06-28

使用Vue Composition API写出清晰、可扩展的表单实现

表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。基于组件的框架，如 Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。在本教程中，将向您展示新的 Vue Composition API如何使表单代码更清晰、

xustart0 2020-06-14

实例讲解PHP表单

1 GET 和 POST 都创建数组。此数组包含键/值对，其中的键是表单控件的名称，而值是来自用户的输入数据。2 GET 和 POST 被视作 $_GET 和 $_POST。它们是超全局变量，这意味着对它们的访问无需考虑作用域 - 无需任何特殊代码，您能够

YAruli 2020-06-13

Element表单验证（1）

首先要掌握Element官方那几个表单验证的例子，然后才看下面的教程。其中，对于我们使用Element的来说，Rules最重要，也是这部分内容较多的。// 验证是根据字段名来的，rules.name 对应 source.name。source和callba

Kakoola 2020-05-17

2019-2020-2 网络对抗技术 20175318 Exp8 Web基础

能正常安装、启停Apache。理解HTML，理解表单，理解GET与POST方法,编写一个含有表单的HTML。理解JavaScript的基本功能，理解DOM。编写JavaScript验证用户名、密码的规则。课题负责人需要完成：登陆后可以发贴；会话管理。表单在

ThinkingLink 2020-05-16

使用jQuery的validate对提交的表单进行验证

<legend>输入您的名字，邮箱，URL，备注。

89463661 2020-04-14

PHP表单ajax和日期函数

form提交方式两种：post,get;这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。采用完全独立于编程语言的文本格式来存储和表示数据。json_encode 用于对变量进行 JSON 编码，该函数如果执行成功返回 JSON 数据，否则返

xcguoyu 2020-03-04

HTML + CSS + JavaScript 实现注册页面信息验证（表单验证）

创建一个注册页面，如下图。然后再对注册信息进行判断，判断其是否符合要求。我们可以使用三个块标签，可以将这三个部分分别放到每个块标签中。<td class="td_right"><input type="tex

somboy 2020-03-03

解决vue+ element ui 表单验证有值但验证失败问题

<el-input type="textarea" v-model="form.template" :rows="8" placeholder="请输入数据模板" :re

Elements小帅 2020-01-16

springmvc之如何对表单数据进行校验

在springmvc中，可直接通过注解驱动的方式进行数据校验。

牧场SZShepherd 2020-01-13

关于boostrapvalidator表单验证神器详细配置说明

介绍它之前，还是给出它的源码以及API的地址吧。来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先

Chinahdy 2020-01-10
qiukui00

qiukui00

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号