HTML+JS = 网站注册界面源代码

最新推荐文章于 2024-09-08 22:48:45 发布
最新推荐文章于 2024-09-08 22:48:45 发布
阅读量3k 收藏 6
点赞数
原文链接：http://www.cnblogs.com/weimin1314/p/8260606.html
版权

 

 
  
 
  
本注册页面未设置编码方式和兼容性，已测试，在Chrome浏览器显示正常
 
  
 
 
  

<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
<style>
        .pg_header{
            position: fixed;
            height: 48px;
            top: 0;
            left: 0;
            right: 0;
            background-color: #2459a2; 
            line-height: 48px;
        }
        .pg_header .logo{
            margin: 0 auto;
            float: left;
            width: 200px;
            text-align: center;
            line-height: 48px;
            font-size: 28px;
            color: white;
        }
        .pg_dl{
            left: 400px;
            display: inline-block;
            padding: 0 40px;
            color: white;
        }
        .pg_header .pg_dl:hover{
            background-color: #2459fb;
            cursor: pointer;
        }
        .left{
            margin-top: 20px;
            width: 400px;
            display: inline-block;
            float: left;        
        }
        .pg_body{
            margin-top: 50px;
            font-size: 18px;
            display: inline-block;
            width: 200px;
        }
        .pg_body .menu{
            width: 800px;
            padding: 15px;    
            float: left;
            font-weight: bold;
        }
        input[type="text"]{
            width: 200px;
            height: 25px;
            border-radius: 6px;
        }
        input[type="password"]{
            width: 200px;
            height: 25px;
            border-radius: 6px;
        }
        input[type="button"]{
            background-color: #555555;
               border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        input[type="submit"]{
            background-color: #555555;
               border: none;
            color: white;
            padding: 12px 29px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 17px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 4px;
        }
        .kong{
            margin-top: -54px;
            margin-left: 200px;
            float:left;
            padding: 15px;
        }
        .img{
            width: 50px;
            height: 40px;
        }
        .can{
            width: 1220px;
            height: 40px;
            line-height: 40px;
            margin: 0 auto;
            text-align: center;
            display: inline-block;
        }
        .tian{
            color: red;
            float: right;
            font-size: 12px;
            margin-right: -120px;
            margin-top: -25px;
        }
    </style>
</head>
<body id="i88" style="margin: 0">
    <div class = "pg_header">
        <a class = "logo">LOGO</a>
        <a class="pg_dl" id="i77">注册</a>    
    </div>
    <form name="tijiao" method="post" onsubmit="return check()" action="winford.top">
        <div class="left"></div>
        <div class="pg_body">
                <div class="menu">用户名:</div>
                    <div class="kong">
                        <input id="text1" type="text" name="01" placeholder="请输入用户名" onblur="check()"><span id="div1" class="tian" style="margin-top: 4px">*(为必填)<span>
                    </div>
                <div class="menu">真实姓名:</div>
                    <div class="kong">
                        <input id="i2" type="text" name="01">
                    </div>
                <div class="menu">性别:</div>
                    <div class="kong" style="width:200px;">
                         男<input type="radio" name="gender" value="1">
                         女 <input type="radio" name="gender" value="2">
                    </div>
                <div class="menu">密码:</div>
                    <div class="kong">
                        <input id="text2" type="password" name="02" onblur="check()">
                        <span id="div2" class="tian" style="margin-top: -25px">*(为必填)<span>
                    </div>
                <div class="menu">确认密码:</div>
                    <div class="kong">
                        <input id="text3" type="password" name="01" onblur="check()">
                        <span id="div3" class="tian">*(为必填)<span>
                    </div>
                <div class="menu">电话号码:</div>
                    <div class="kong">
                        <input id="i5" type="text" name="01">
                    </div>
                <div class="menu">邮箱地址:</div>
                    <div class="kong">
                        <input id="text4" type="text" name="01" onblur="check()">
                        <span id="div4" class="tian">*(为必填)<span>
                    </div>
                <div class="menu">头像上传:    </div>
                    <div class="kong">
                        <input type="file" name="file" value="选择头像" accept="image/*">
                </div>    
                <div class="menu">爱好:</div>
                    <div class="kong" style="width: 300px;">
                        撩妹 <input type="checkbox" name="favor">
                        写代码 <input type="checkbox" name="favor">
                        篮球 <input type="checkbox" name="favor">
                        足球 <input type="checkbox" name="favor">
                    </div>        
                <div class="menu">个人签名:</div>
                <div class="kong">
                    <textarea name="meno" style="width: 280px;height: 40px;">
                    有点懒。。。。
                    </textarea>
                </div>
        </div>
        <div class="can">
            <input id="i111" type="submit" name="002" value="注  册">
            <p style="width: 200px;display: inline-block;"></p>
            <input id="i222" type="button" name="004" value="取  消">

        </div>
    </form>
    <script type="text/javascript">
            //刷新or取消
            document.getElementById('i77').onclick = function(){
                location.reload();
            }
            document.getElementById('i222').onclick = function(){
                location.reload();
            }

            //用户名验证
            function checkname(){ 
                var div = document.getElementById("div1"); 
                div.innerHTML = ""; 
                var name1 = document.tijiao.text1.value; 
                if (name1 == "") { 
                div.innerHTML = "用户名不能为空！"; 
                document.tijiao.text1.focus(); 
                return false; 
            } 
                if (name1.length < 4 || name1.length > 16) { 
                div.innerHTML = "长度4-16个字符"; 
                document.tijiao.text1.select(); 
                return false; 
            } 
                var charname1 = name1.toLowerCase(); 
                for (var i = 0; i < name1.length; i++) { 
                var charname = charname1.charAt(i); 
                if (!(charname >= 0 && charname <= 9) && (!(charname >= 'a' && charname <= 'z')) && (charname != '_')) { 
                    div.innerHTML = "用户名包含非法字符"; 
                    document.form1.text1.select(); 
                    return false; 
                } 
            } 
                return true;
        }

            //密码验证
            function checkpassword(){ 
                var div = document.getElementById("div2"); 
                div.innerHTML = ""; 
                var password = document.tijiao.text2.value; 
                if (password == "") { 
                div.innerHTML = "密码不能为空"; 
                document.tijao.text2.focus(); 
                return false; 
            } 
                if (password.length < 4 || password.length > 16) { 
                div.innerHTML = "密码长度为4-16位"; 
                document.tijiao.text2.select(); 
                return false; 
                } 
                return true; 
        }

            function checkrepassword(){ 
                var div = document.getElementById("div3"); 
                div.innerHTML = ""; 
                var password = document.tijiao.text2.value; 
                var repass = document.tijiao.text3.value; 
                if (repass == "") { 
                div.innerHTML = "密码不能为空"; 
                document.tijiao.text3.focus(); 
                return false; 
            } 
                if (password != repass) { 
                div.innerHTML = "密码不一致"; 
                document.tijiao.text3.select(); 
                return false; 
            } 
                return true; 
        }
        //邮箱验证
        function checkEmail(){ 
            var div = document.getElementById("div4"); 
            div.innerHTML = ""; 
            var email = document.tijiao.text5.value; 
            var sw = email.indexOf("@", 0); 
            var sw1 = email.indexOf(".", 0); 
            var tt = sw1 - sw; 
            if (email.length == 0) { 
            div.innerHTML = "邮箱不能为空"; 
            document.tijiao.text5.focus(); 
            return false; 
        } 

            if (email.indexOf("@", 0) == -1) { 
            div.innerHTML = "必须包含@符号"; 
            document.tijiao.text5.select(); 
            return false; 
        } 

            if (email.indexOf(".", 0) == -1) { 
            div.innerHTML = "必须包含.符号"; 
            document.tijiao.text5.select(); 
            return false; 
        } 

            if (tt == 1) { 
            div.innerHTML = "@和.不能一起"; 
            document.tijiao.text5.select(); 
            return false; 
        }

            if (sw > sw1) { 
            div.innerHTML  = "@符号必须在.之前"; 
            document.tijiao.text5.select(); 
            return false; 
        } 
            else { 
            return true; 
            }
        return ture; 
        }

            function check(){ 
            if (checkname() && checkpassword() && checkrepassword() && checkEmail()) { 
            return true; 
            } 
            else { 
            return false; 
        } 
    } 
    </script>
</body>
</html>
 
 
 

 

转载于:https://www.cnblogs.com/weimin1314/p/8260606.html

                

        

        




    

  


    

      

        

            

              
                
                  weixin_34354945
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
注册界面相关代码注册界面相关代码

				
			

			

				

					05-19
				

			

		

		

			
				
注册界面相关代码注册界面相关代码注册界面相关代码注册界面相关代码注册界面相关代码

			
		

	



                

            
              



	

		

			

				
					
html js注册页面代码,JS一个简单的注册页面实例

				
			

			

				

					weixin_34638409的博客
				

				

					06-03
					
					2676
					
				

			

		

		

			
				
//    $(function(){//      $("input[name='uname']").blur(function(){//        var unamestr = $(this).val();//        var regstr = /^[\u4e00-\u9fa5]{2,4}$/;//2到4位汉字////      });//    });function checkn...

			
		

	



              


  
              

                


	

		

			

				
					
设计简易HTML登录界面

					
最新发布

				
			

			

				

					m0_64819732的博客
				

				

					09-08
					
					1908
					
				

			

		

		

			
				
登录界面

			
		

	





	

		

			

				
					
超漂亮网站界面源码，可以做购物网站

				
			

			

				

					03-31
				

			

		

		

			
				
超漂亮网站界面源码，可以做购物网站，可以嵌入自己的应用程序内使用

			
		

	



		

			
		



	

		

			

				
					
HTML+JS编写一个简易的注册页面，并对输入进行规范检测

				
			

			

				

					qq_50898676的博客
				

				

					09-15
					
					9785
					
				

			

		

		

			
				
经过两天对JavaScript的学习，基于对第一次超简易的HTML编写的注册页面，进行改编完善，重新写了一个界面，学习到新的知识很快乐，便分享两个注册页面的

源代码给初学者参考学习

（一）HTML的登入界面：



源代码：（利用表格进行放置）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	...

			
		

	





	

		

			

				
					
网页注册界面

				
			

			

				

					10-22
				

			

		

		

			
				
本页面是网页的注界面，其中具有验证用户名、密码、邮箱等合法性的功能。

			
		

	





	

		

			

				
					
《html+css+javascript 网页制作案例教程》源代码

				
			

			

				

					04-02
				

			

		

		

			
				
学习者可以通过打开这些文件，查看源代码，理解它们如何将HTML、CSS和JavaScript结合起来创建功能丰富的网页。同时，通过实际修改和运行代码，学习者能更好地掌握这三门技术的实战应用。  在学习过程中，你可以关注...

			
		

	





	

		

			

				
					
《网页设计与制作项目教程（HTML+CSS+JavaScript）》源代码.zip

				
			

			

				

					02-03
				

			

		

		

			
				
通过分析这些源代码，你可以学习到如何使用正确的标签来构建语义化的页面结构，这对于搜索引擎优化（SEO）和无障碍访问至关重要。  CSS (Cascading Style Sheets) 是用于控制网页外观和布局的语言。CSS允许设计师将...

			
		

	





	

		

			

				
					
基于HTML+CSS+JavaScript实现的QQ音乐界面+源代码+文档

				
			

			

				

					04-09
				

			

		

		

			
				
这个项目包括了完整的源代码和相关文档，帮助初学者和开发者深入理解前端开发的基本原理和实践技巧。  首先，HTML（HyperText Markup Language）是网页的基础，用于构建网页的结构。在这个QQ音乐界面的实现中，HTML...

			
		

	





	

		

			

				
					
【html+js+css】- 源代码 - HTML JavaScript CSS

				
			

			

				

					07-06
				

			

		

		

			
				
HTML提供内容结构,CSS美化界面样式,JavaScript赋予网页动态交互能力。  随着Web技术的不断发展,HTML、CSS和JavaScript也在不断进化。HTML5引入了更多语义化标签,CSS3带来了更强大的样式控制能力,JavaScript也演化出...

			
		

	





	

		

			

				
					
HTML5+CSS3+JS入门教程 + 源代码  pdf

				
			

			

				

					03-28
				

			

		

		

			
				
总之，这个"HTML5+CSS3+JS入门教程"结合源代码，是一个全面学习网页开发的好资源，适合想要入门前端开发的初学者。通过系统学习，你可以掌握构建现代网页所需的核心技术，并有能力开发出富有吸引力且功能丰富的网站...

			
		

	





	

		

			

				
					
web交互设计网页注册源代码

				
			

			

				

					11-24
				

			

		

		

			
				
web交互设计课程实验源代码，用户登录注册设计，参考黎老师课程

			
		

	





	

		

			

				
					
WEB基本网页代码（含登录、注册、信息维护等）

				
			

			

				

					06-10
				

			

		

		

			
				
自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为
Create  table  userinfo(
Username  varchar  primary key,
Pwd  varchar,
Gender varchar,
Email varchar,
Question varchar,
Answer varchar)

			
		

	





	

		

			

				
					
javascript注册页面代码

				
			

			

				

					06-08
				

			

		

		

			
				
javascript注册页面代码（只包含用户名&密码&邮箱的验证）

			
		

	





	

		

			

				
					
js(javascript)获取网页源码

				
			

			

				

					05-22
				

			

		

		

			
				
 
 
 
 
远程网页源代码读取 
 
/* 页面字体样式 */ 
body, td, input, textarea { 
font-family:Arial; 
font-size:12px; 
} 
 
 
//用于创建XMLHttpRequest对象 
function createXmlHttp() { 
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式 
if (window.XMLHttpRequest) { 
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式 
} else { 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式 
} 
} 
//直接通过XMLHttpRequest对象获取远程网页源代码 
function getSource() { 
var url = document.getElementById("url").value; //获取目标地址信息 
//地址为空时提示用户输入 
if (url == "") { 
alert("请输入网页地址。"); 
return; 
} 
document.getElementById("source").value = "正在加载……"; //提示正在加载 
createXmlHttp(); //创建XMLHttpRequest对象 
xmlHttp.onreadystatechange = writeSource; //设置回调函数 
xmlHttp.open("GET", url, true); 
xmlHttp.send(null); 
} 
//www.mp4ku.com将远程网页源代码写入页面文字区域 
function writeSource() { 
if (xmlHttp.readyState == 4) { 
document.getElementById("source").value = xmlHttp.responseText; 
} 
} 
 
 
 
远程网页源代码读取 
 
地址： 
 
 
 
 


			
		

	





	

		

			

				
					
html，css和js写的登录与注册界面

				
			

			

				

					10-18
				

			

		

		

			
				
html，css和js写的登录与注册界面。本人菜水平，希望对初学者有帮助

			
		

	





	

		

			

				
					
用户注册html js,js实现注册页面

				
			

			

				

					weixin_39837867的博客
				

				

					06-10
					
					1459
					
				

			

		

		

			
				
一css代码.body{margin:0;padding:0;}.login{position:absolute;margin:150pxauto;top:-30px;left:105px;width:400px;border:1pxsolidwhite;background:#7EE2B5;border-radius:10px;transform:rotate(-15deg);...

			
		

	





	

		

			

				
					
html+css+js实现注册页面

				
			

			

				

					m0_53446118的博客
				

				

					09-26
					
					4290
					
				

			

		

		

			
				
登录页面html+cssjs
用html+css+js实现注册页面大概是这样的，当前只完成了注册界面，还在不断完善功能
html+css
使用HTML和CSS做出如上图所示简约的界面，代码核心主要是整体布局的设定，以及输入input属性的一些设置，主要代码如下所示
CSS
下面展示一些 内联代码片。
// A code block
var foo = 'bar';

// An highlighted block
<style>
        * {
            margin: 0

			
		

	





	

		

			

				
					
一个用js源码编写的静态网站

				
			

			

				

					Tmevolcy的博客
				

				

					05-25
					
					424
					
				

			

		

		

			
				
要源码，私聊博主





			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值