注册验证框(css+div+jquery)

最新推荐文章于 2022-09-29 11:31:17 发布
最新推荐文章于 2022-09-29 11:31:17 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： css+div+jquery 文章标签： jQuery CSS div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jin3815/article/details/8944610
版权

    效果不错的注册验证框

     最近做项目需要用到注册这一模块，所以花了两天的时间手工css+div写了注册框，参考了不少网站，总算写完了，脚本使用的是jquery，验证方式采用正则表达式，写得比较乱，以后有时间再改，先顶着用吧~~~ -

   下面的原代码：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 注册框 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
   
  <script type="text/javascript" src="jquery-1.9.js"></script>
  
  <script type="text/javascript"> 
    $(document).ready(function(){
    
	   //关闭事件
       $(".close").click(function(){
		   
		   $("#reg").css("display","none");
		   		   
	   });
  
       //用户名验证
	   $("#username").focus(function(){
             if($(this).val()=='')
		     {
			    $("#reg dl dd span.message_user").css("display","block");
                $("#reg dl dd span.error_user").css("display","none");
             } 
            
	   });
        $("#username").blur(function(){
             
               if(!(/^(\w){3,10}$/).test($(this).val()))
		       {
                $("#reg dl dd span.error_user").css("display","block");
                $("#reg dl dd span.succ_user").css("display","none");
                $("#reg dl dd span.message_user").css("display","none");
		       } 
			   else
			   {

                 $("#reg dl dd span.succ_user").css("display","block");
                 $("#reg dl dd span.error_user").css("display","none");
				 $("#reg dl dd span.message_user").css("display","none");

			   }
	   });

	   //密码验证
        $("#password").focus(function(){
            
			 if($(this).val()=='')
			 {
				$("#reg dl dd span.message_pass").css("display","block");
				$("#reg dl dd span.error_pass").css("display","none");
			 }  
            
	   });
        $("#password").blur(function(){
             $("#reg dl dd span.message_pass").css("display","none");
               if(!(/^[A-Za-z0-9_]{6,18}$/gi).test($(this).val()))
		       {
                $("#reg dl dd span.error_pass").css("display","block");
                $("#reg dl dd span.succ_pass").css("display","none");
				$("#reg dl dd span.message_pass").css("display","none");
		       } 
			   else
			   {

                 $("#reg dl dd span.succ_pass").css("display","block");
                 $("#reg dl dd span.error_pass").css("display","none");
				 $("#reg dl dd span.message_pass").css("display","none");

			   }
	   });

       //确定密码验证
	   $("#notpassword").blur(function(){
              if($(this).val()!=$("#password").val())
		      {
                 $("#reg dl dd span.succ_notpass").css("display","none");
                 $("#reg dl dd span.error_notpass").css("display","block");   

		      }
			  else
		     {
                 $("#reg dl dd span.error_notpass").css("display","none");
				 $("#reg dl dd span.succ_notpass").css("display","block");
		     }
           
       });

       //电话验证
       
	   $("#telephone").blur(function(){
              if(!(/^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/gi).test($(this).val()))
		     {
                  $("#reg dl dd span.error_telephone").css("display","block");
                  $("#reg dl dd span.succ_telephone").css("display","none");
		     }
			 else
		    {
                  $("#reg dl dd span.succ_telephone").css("display","block");
				  $("#reg dl dd span.error_telephone").css("display","none");
              
		    }
       });

	   //真实姓名
        $("#relname").blur(function(){
              if(!(/[\u4E00-\u9FA5]{2,4}/gi).test($(this).val()) )
		     {
                  $("#reg dl dd span.error_relname").css("display","block");
                  $("#reg dl dd span.succ_relname").css("display","none");
		     }
			 else
		    {
                  $("#reg dl dd span.succ_relname").css("display","block");
				  $("#reg dl dd span.error_relname").css("display","none");
              
		    }
       });

	   //身份证号
        $("#identity").blur(function(){
              if(!(/^(\d{17})([0-9]|X)$/gi).test($(this).val()))
		     {
                  $("#reg dl dd span.error_identity").css("display","block");
                  $("#reg dl dd span.succ_identity").css("display","none");
		     }
			 else
		    {
                  $("#reg dl dd span.succ_identity").css("display","block");
				  $("#reg dl dd span.error_identity").css("display","none");
              
		    }
       });



       //电子邮件
       $("#email").blur(function(){
              if(!(/^[A-Za-z0-9_]+@([A-Za-z0-9-]*\.){1,3}[A-Za-z]*$/gi).test($(this).val()))
		     {
                  $("#reg dl dd span.error_email").css("display","block");
                  $("#reg dl dd span.succ_email").css("display","none");
		     }
			 else
		    {
                  $("#reg dl dd span.succ_email").css("display","block");
				  $("#reg dl dd span.error_email").css("display","none");
              
		    }
       });


	});

  </script>
  <style type="text/css">
    
	#reg
	{
	  width:600px;
	  height:550px;
	  border:1px solid #ccc;
	  position:absolute;	
	  z-index:9999;
	  background:#fff; 
    }

	#reg h2 
	{
	  height:40px;
	  line-height:40px;
	  text-align:center;
	  font-size:14px;
	  letter-spacing:1px;
	  color:#666;
	  background:url(login_header.png) repeat-x;
	  margin:0;
	  padding:0;
	  border-bottom:1px solid #ccc;
	  margin:0 0 20px 0;	
    }
    #reg h2 img 
	{
	  float:right;
	  position:relative;
	  top:14px;
	  right:8px;
	  cursor:pointer;
    }
	#reg dl 
	{
	  font-size:14px;
	  color:#666;
	  margin:20px;
	  padding:0 0 0 10px;
	  position:relative;
    }
	#reg dl dd
	{
        margin-top:20px;
        margin-left:40px;
	}
	#reg dl dd input.text
	{
	  width:200px;
	  height:25px;
	  border:1px solid #ccc;
	  background:#fff;
	  font-size:14px;
	  color:#666;
    }


   
    #reg dl dd input.submit 
	{
	  margin-top:20px;
	  width:143px;
	  height:33px;
	  background:url(reg.png) no-repeat;
	  border:none;
	  cursor:pointer;
    }
	#reg dl dd span
	{
	   display:none;
	   font-size:12px;
	   color:#333;
	   width:165px;
	   height:32px;
	   line-height:32px;
	   padding:0 0 0 35px;
	   position:absolute;
	   letter-spacing:1px;
	
    }

    #reg dl dd span.error_user,#reg dl dd span.error_pass,#reg dl dd span.error_notpass,
    #reg dl dd span.error_telephone,#reg dl dd span.error_relname,#reg dl dd span.error_identity,
    #reg dl dd span.error_email
	{
	  background:url(reg_error.png) no-repeat;
	  display:none;
    }
    #reg dl dd span.succ_user, #reg dl dd span.succ_pass ,#reg dl dd span.succ_notpass,
	#reg dl dd span.succ_telephone,#reg dl dd span.succ_relname,#reg dl dd span.succ_identity,
    #reg dl dd span.succ_email
	{
	  height:14px;
	  line-height:14px;
	  background:url(reg_succ.png) no-repeat;
	  padding:0 0 0 20px;
	  display:none;
	  
    }

	
    #reg dl dd span.error_user
	{
	  top:0px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_user 
	{
	  top:10px;
	  left:350px;
	  
    }
    #reg dl dd span.message_user,span.message_pass {
	  top:15px;
	  margin-left:80px;
	  
    }
	#reg dl dd span.error_pass
	{
	  top:50px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_pass
	{
	  top:60px;
	  left:350px;
	  
    }
	#reg dl dd span.error_notpass
	{
	  top:100px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_notpass
	{
	  top:110px;
	  left:350px;
	  
    }
	#reg dl dd span.error_telephone
	{
	  top:185px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_telephone
	{
	  top:195px;
	  left:350px;
	  
    }
    #reg dl dd span.error_relname
	{
	  top:235px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_relname
	{
	  top:245px;
	  left:350px;
	  
    }
	 #reg dl dd span.error_identity
	{
	  top:285px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_identity
	{
	  top:295px;
	  left:350px;
	  
    }
	 #reg dl dd span.error_email
	{
	  top:335px;
	  left:330px;
	  
    }
    #reg dl dd span.succ_email
	{
	  top:345px;
	  left:350px;
	  
    }
	#reg dl dd .message_user
	{
	    margin-top:-20px;
	    left:260px;		
	}

	#reg dl dd .message_pass
	{
       top:40px;
	   left:260px;	  	   
	}



  </style>
 </head>

 <body>
    <div id="reg">
	  <h2><img src="close.png" alt="" class="close" />会员注册</h2>
	  <form name="reg">
	    <dl>
		<dd>用 户 名： <input type="text" name="user" id="username" class="text" />
			<span class="error_user">输入不合法，请重新输入!</span>
			<span class="succ_user"></span><br>
			<span class="message_user"> 请输入用户名，2~20位，由字母、数字和下划线组成！</span>
		</dd>
		<dd>密　　码： <input type="password" name="pass" id="password" class="text" />
		    <span class="error_pass">输入不合法，请重新输入!</span>
			<span class="succ_pass"></span><br>
			<span class="message_pass">只能包含大小写字母、数字和非空格字符</span>
		</dd>
		<dd>密码确认： <input type="password" name="notpass" class="text" id="notpassword"/>
		    <span class="error_notpass">两次密码输入不同</span>
			<span class="succ_notpass"></span><br>
		
		</dd>
        <dd>    性  别： 男性：<input type="radio" checked="checked" name="Sex" value="male">
                  女性：<input type="radio" name="Sex" value="female">
        </dd>
        <dd>    电话： <input type="text" name="telephone" class="text" id="telephone"/>
		     <span class="error_telephone">输入不合法，请重新输入</span>
			 <span class="succ_telephone"></span><br>
		</dd>
		<dd>真实姓名： <input type="text" name="relname" class="text" id="relname"/>
		     <span class="error_relname">输入不合法，请重新输入</span>
			 <span class="succ_relname"></span><br>
		</dd>
        <dd>身份证号： <input type="text" name="identity" class="text" id="identity"/>
		     <span class="error_identity">输入不合法，请重新输入</span>
			 <span class="succ_identity"></span><br>
		</dd> 
		<dd>电子邮件： <input type="text" name="email" class="text" autocomplete="off" id="email"/>
		     <span class="error_email">输入不合法，请重新输入</span>
			 <span class="succ_email"></span><br>
		</dd>
		
		<dd style="padding:0 0 0 80px;"><input type="button" class="submit" /></dd>
	    </dl>
	   </form>
	</div>
 </body>
</html>

效果图：


ps:写得不好，不少重复的代码，以后有得改了，身份证的验证有一定的算法，不是我写得这么简单，我偷懒，简化了


Comexs
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的css注册页面
woaichuzhong的博客
03-10 1568
注册界面 &lt;style&gt; .form{ width: 70%; position: absolute; top: 10%; left: 25%; } .tree{ position: relative; top: 420px; left: 220px; } .form ul{ width: 750px;...
注册页面 验证 密码 JavaScript HTML CSS
06-09
一个实现注册页面的详细代码！功能基本实现！
登录界面plus（实现注册和验证功能）（并不安全）
epicf的博客
04-05 1362
登录界面plus（实现注册和验证功能）（并不安全） 登录界面由php和sql共同完成。 html界面 首先是两个html界面：登录界面，注册界面，上代码： 登录界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> </hea...
用script、div验证用户名，密码方法
缭绕
12-25 3410
//编写获取相应的元素id function $(gElementId){  return document.getElementById(gElementId); } function checkuser(username){ var  reg= /^[A-Za-z]+$/; //定义一个变量让其为字母标准化 if(username.value==""){ alert("请输入
js密码输入与确认密码验证功能
qq_34761452的博客
10-20 1万+
密码确认密码 标签（空格分隔）： 密码验证 带有比较复杂的密码验证方式，比如具备大小写 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;meta name="viewport" content="width=devic
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
简单jQuery+CSS实现验证表单红色提示效果 16.简单表单input输入框提示插件1.0下载 17.另种效果的jQuery EasyValidator表单验证插件demo示例下载 18.漂亮绿色多级动感仿flash效果的jquery网站导航菜单 19....
网站模板(DIV+CSS+JQUERY)
06-13
本模板特别强调了"DIV+CSS+JQUERY"的运用，这三种技术在现代网页开发中起着至关重要的作用。 **DIV**（层）是HTML中的一个通用容器元素，用于组织页面布局。它通过CSS样式控制，可以实现灵活多变的布局。在本模板中...
div+css+jquery
08-07
在网页设计和开发中，`div+css+jquery` 是一套常见的技术组合，用于构建现代、响应式的网页界面。下面将分别对这三个主要组件进行详细解释，并探讨它们如何协同工作来实现动态、交互式的效果。 1. **Div（Division...
CSS+jQuery实现的在线答题功能
09-25
这部分内容将在后续文章中详细讲解，即“如何使用jQuery+PHP+MySQL来实现一个在线测试项目”。 总的来说，这个CSS和jQuery实现的在线答题功能提供了一个简洁的前端解决方案，适用于快速搭建一个基本的在线测试环境...
后台管理模版CSS+DIV
01-26
总结起来，这些后台管理模版利用了CSS、DIV、JavaScript和jQuery等技术，旨在为开发者提供一套快速开发后台管理系统的工具集，同时通过Ext-JS等高级框架，可以进一步提升用户体验和功能复杂度。无论是对于新手还是...
html密码验证怎么实现页面,JavaScript实现简单的密码验证
weixin_29122543的博客
06-03 4646
(1)默认密码是：123456(2)打开页面时，弹出输入框“请输入密码”，当密码输入正确时，弹出输入框”请再次输入密码“打开.jpg再次输入.jpg(3)当密码输入错误时，重新弹出输入框“请输入密码”，直到输入正确，然后弹出输入框”请再次输入密码“打开.jpg输入正确.jpg一开始误会首次输入错误时弹出的输入框，代码如下：验证密码var pwd,pwdAgain;var pwd=prompt("请...
html实现二次密码验证
weixin_58006226的博客
09-29 3519
html实现二次密码验证，第一次输入密码和第二次输入密码不一致则会报错
HTML+CSS做登录注册界面
热门推荐
风从北方来的博客
05-29 14万+
在登录界面点注册会进入注册界面登录界面代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&am
js简单表单验证（弹出框）
飞鸿的博客
05-07 1万+
登录和注册的弹出框的js验证有些字段是不能为空的，那么我们就要通过验证判断：用户是否填写。此时就要用到js验证。登录html&lt;form action="" method="post" name="form1" target="_blank" id="form1" onSubmit="return check_login()"&gt; &lt;h1&amp
用HTML和CSS写注册登录界面
weixin_51376346的博客
10-23 9389
一.结果演示 注册界面: 登录界面： 二.主要代码展示 1.HTML部分 1.注册界面 对于注册界面，可以将其划分为三个部分，分别为左边的“新用户注册”，中间的主体部分，以及右边的“已有账号？立即登录”部分。 <div class="rg_layout"> <div class="rg_left"> <p>新用户注册</p> </div> <div class="r...
HTML
IDOBLUE的博客
04-25 180
JAVAWEB学习 HTML第一天 用户登录 <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0p...
43-css案例-注册界面
shwjakak的博客
11-29 1489
html的tr和td标签 两姐妹双飞 2019-01-30 19:58:16 13489 收藏 33 版权 tr 标签——代表HTML表格中的一行 1） tr 标签是成对出现的,以<tr>开始,</tr>结束 2）属性 ——Common -- 一般属性 1》align ：代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) 2》v...
纯HTML和CSS实现登录注册框
qq_37086980的博客
11-08 1751
纯HTML和CSS实现登录注册框 注册 <div class="main"> <div class="registerbox"> <h3>注册账号</h3> <form action="#" method="get"> <div class="email"> <em class="..
HTML中的密码框
帝都子民
10-31 1586
HTML中的密码框 就是在写密码框的时候加入两个事件 onpaste='return false'  oncopy='return false' 就可以防止密码框的复制和粘贴功能了
使用 CSS+DIV+jQuery+PHP 做一个企业网站
最新发布
06-08
好的，您想了解关于使用 CSS+DIV+jQuery+PHP 做企业网站的具体流程和步骤吗？我可以为您提供一些基本的指导。 首先，您需要设计并创建网站的页面布局。使用 CSS 和 DIV 布局可以帮助您实现灵活的页面布局和样式控制...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值