JS学习之前端简单注册页面

最新推荐文章于 2024-08-13 17:16:47 发布
最新推荐文章于 2024-08-13 17:16:47 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： HTML/Css/Javascript学习 文章标签： 入门 javascript html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35354855/article/details/78444879
版权

JS学习之前端简单注册页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<script type="text/javascript">
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}



</script>
</head>

<body>
<form name="form1" method="post" action="">
  <div align="center">
    <p> </p>
    <p> </p>
    <table width="47%" border="0">
      <tr>
        <td colspan="2"><div align="center">用户注册</div></td>
      </tr>
      <tr>
        <td width="28%"><div align="right">用户名：</div></td>
        <td width="72%"><div align="left">
          <label for="1"></label>
          <input type="text" name="1" id="1">
        </div></td>
      </tr>
      <tr>
        <td><div align="right">输入密码：</div></td>
        <td><div align="left">
          <label for="2"></label>
          <input type="text" name="2" id="2">
        </div></td>
      </tr>
      <tr>
        <td><div align="right">再次输入密码：</div></td>
        <td><div align="left">
          <label for="3"></label>
          <input type="text" name="3" id="3">
        </div></td>
      </tr>
      <tr>
        <td><div align="right">性别：</div></td>
        <td><div align="left">
                      <label>
              <input type="radio" name="4" value="男" id="4_0">
              男</label>
            
            <label>
              <input type="radio" name="4" value="女" id="4_1">
              女</label>
          
        </div></td>
      </tr>
      <tr>
        <td><div align="right">手机号：</div></td>
        <td><div align="left">
          <label for="5"></label>
          
          <input type="text" name="5" id="5" οnkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div></td>
      </tr>
      <tr>
        <td><div align="right">兴趣爱好：</div></td>
        <td><div align="left">
          
            <label>
              <input type="checkbox" name="6" value="游泳" id="6_0">
              游泳</label>
            
            <label>
              <input type="checkbox" name="6" value="天文" id="6_1">
              天文</label>
            
            <label>
              <input type="checkbox" name="6" value="IT" id="6_2">
              IT</label>
            
            <label>
              <input type="checkbox" name="6" value="美术" id="6_3">
              美术</label>
            
            <label>
              <input type="checkbox" name="6" value="音乐" id="6_4">
              音乐</label>
          
        </div></td>
      </tr>
      <tr>
        <td><div align="right">籍贯：</div></td>
        <td><div align="left">
          <label for="7"></label>
          <select name="7" id="7">
           <option>北京</option>
           <option>山东</option>
           <option>上海</option>
           <option>河北</option>
           <option>西安</option>
          </select>
         
        </div></td>
      </tr>
      <tr>
        <td><div align="right">个人简介：</div></td>
        <td><div align="left">
          <label for="8"></label>
          <textarea name="8" id="8"></textarea>
        </div></td>
      </tr>
      <tr>
        <td><div align="right">
          <input type="button" name="zhuce" id="zhuce" value="注册" οnclick="xianshi()">
        </div></td>
        <td><div align="left">
          <input type="reset" name="cc" id="cc" value="重置">
        </div></td>
      </tr>
    </table>
  </div>
</form>
<script type="text/javascript">
	function xianshi(){
		
			var yonghu=document.getElementById("1").value;
			var mima1=document.getElementById("2").value;
			var mima2=document.getElementById("3").value;
			var xingbie=document.getElementsByName("4");
			
			var shoujihao=document.getElementById("5").value;
			var xingqu=document.getElementsByName("6");
			
			
			var jiguan = document.getElementById("7");  
			var Sindex= jiguan.selectedIndex;
			var Sjiguan=  jiguan.options[Sindex].text;
			
			var jianjie=document.getElementById("8").value;
			
			var re = /^\d+(?=\.{0,1}\d+$|$)/;
			while(1&&flag!=0){
				
			var flag = 0;
			var Sxingbie="";
			var Sxingqu="";
			if(yonghu!=""&&mima1!=""&&mima2!=""&&shoujihao!=""){
					if(yonghu.length<4||yonghu.length>10){
						alert("用户名错误,请重新输入！");
						document.getElementById("1").value="";
						document.getElementById("1").focus();
						flag++;
						break;
					}
					if(mima1.length<6||mima1.length>16){
						alert("密码长度太短！请重新输入！");
						flag++;
						break;
					}
					if(mima1!=mima2){
						alert("两次密码不同！请重新输入！");
						flag++;
						break;
					}
					if(shoujihao.length!=11){
						alert("手机号不正确，请重新输入！");
						document.getElementById("5").value="";
						document.getElementById("5").focus();
						flag++;
						break;
					}
					
					
					if(!re.test(shoujihao)){
						alert("输入不是数字,请重新输入！");
						document.getElementById("5").value="";
						document.getElementById("5").focus();
						flag++;
						break;
					}
					
					for(var i = 0; i<xingbie.length; i++){
					if(xingbie[i].checked==true){
						Sxingbie+= xingbie[i].value.toString();
					}
				}
				var j=0;
				for(var i = 0; i<xingqu.length; i++){
					if(xingqu[i].checked==true){
						if(j==0){
							Sxingqu+=xingqu[i].value.toString();
							j=1;
						}else{
							Sxingqu+= (" , "+xingqu[i].value.toString());
						}
						
					}
				}
				if(flag==0){
					break;
				}
					
					
			}else{
				if(yonghu==""||mima1==""||mima2==""||shoujihao=="")
				{
					alert("请填写完整信息！");
					flag=1;
					break;
				}
				
			}
			
			}
			if(flag==0){
				alert("所有信息正确！");
				
				
				alert("请核对您的信息\n"+"用户名："+yonghu+"\n密码："+mima1+"\n性别："+Sxingbie+"\n手机号:"+shoujihao+"\n兴趣爱好："+Sxingqu+"\n籍贯："+Sjiguan+"\n个人简介："+jianjie);
				
				window.setTimeout("window.open('b.html')",1500); 
			}else{
				alert("请检查您的信息，重新输入！");
			}
	}
	
			
			
</script>
</body>
</html>



b.html页面内容

<html>
<head>
<meta charset="utf-8">
<title>登陆成功页面</title>

</head>

<body>
<h1>登陆成功！！</h1>
</body>
</html>




01-01
关注
专栏目录
node.js简单登录注册功能实现
qq_50646256的博客
01-16 1242
1，首先需要一个sever模块用于引入路由，引入连接数据库的模块，监听服务器 2，要有model层，里面写数据库连接模块和数据库的各种model（表），并导出model对象 3，工具类utils，里面存放一些功能的模块，并且封装后导出 ，例如发送验证码的功能 4，写路由，需要对数据库操作就使用导出的model对象，需要功能模块就使用导出的功能对象 随后返回这个路由，在sever里引入 5，生成api文档 sever模块 //实现登录注册，要先自己写路由放在本地的服务器上 const express=requ
DJango 学习（6）—— Django 数据库连接以及简单的前后端数据交互
ShiJieDeYinYu的博客
10-24 1502
【代码】DJango 学习（6）—— Django 数据库连接以及简单的前后端数据交互。
web前端中一个注册页面
12-24
自己平时的练习，我是今年才学的web，做的不好，希望大家不要介意，希望对大家有帮助。
前端注册页面
poklau的专栏
10-23 1427
好久没来CSDN贴贴代码了，一来是因为半年以来我一直都是在学习xi
从0-1开发一个Vue3前端系统页面-8.注册页面
最新发布
I am the light coursing in the soul of the moon.
08-13 179
本节结合上节7.登录页面应用滑动验证码最后的router-link跳转实现注册页面的开发。
【web前端】注册页面
m0_62608983的博客
01-17 102
（未修改） 1.效果图 2.代码 3.问题： 页面混乱 代码不直观清晰 （修改后） 1.效果图 2.代码 表格就很整齐
前端技术——html——注册页面
niTaoTaoa的博客
11-23 394
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0; padding: 0; /*使元素大小不会...
前端注册页面（输入身份证号自动填充生日）
ZJY158480的博客
04-30 219
【代码】前端注册页面（输入身份证号自动填充生日）
Node.js学习笔记
m0_58575070的博客
06-26 279
writeFileSync(同步写入)文件重命名与移动(rename)stream(流式写入)文件复制 (先读后写)
一个简单的HBuilder
03-12
【标题】"一个简单的HBuilder"项目展示了如何利用HBuilder这一强大的移动应用开发工具，实现基本的用户注册、登录以及从数据库中读取数据的功能。HBuilder是一款基于HTML5技术的快速开发平台，它集成了代码编辑、...
PHP学习之路（4）—— 注册功能（表单验证）
05-13
在用户提交表单之前，JavaScript可以检查输入是否有效，例如验证电子邮件格式、用户名长度等，从而提供即时反馈，减少服务器端的负担。前端验证虽然重要，但不应替代后端验证，因为其可以被轻易绕过。 5. **mubiao....
前端登录注册框架
08-25
一款大气好用的前端登录设计，基于javascript，css的前端网页
前端—css、js—登录注册一体的网站模版
07-07
超好看、超适用的网站模版：三级联动、功能多多、视觉效果赏心悦目、适用性强的网站模版(下载不后悔！！！)
前端用户登陆注册界面
06-01
前端用户登陆注册界面
前端代码+登陆与注册
08-28
前端登陆与注册界面 主要包括账号登陆、扫码登陆、短信验证等功能
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
前端：完整简单详细的注册页面讲解
fuyuo的博客
06-29 3907
完整且简单的注册页面的讲解和代码等
编写一个前端登录注册页面
weixin_35754676的博客
12-17 331
好的，我会尽力为您提供帮助。 在编写前端登录注册页面时，需要考虑以下几个方面： 用户界面设计：需要考虑如何设计页面的布局和风格，使其能够吸引用户的眼球并且易于使用。 数据输入：需要设计输入框和按钮，供用户输入用户名、密码等信息。 数据验证：在用户提交信息之前，需要对输入的数据进行验证，确保其符合要求，比如密码强度足够。 数据处理：当用户提交信息时，需要将其发送到服务器端进行处理，并基于服务...
js实现用户简易注册
weixin_45750969的博客
10-27 724
实现功能 当输入的数值不符合要求提示错误，正确显示验证通过，并跳转成功 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--获取焦点：onfocus--> <!--失去焦点：onblur--> <input type
NodeJS Connect中间件实战：构建用户注册与登录系统
在NodeJS学习笔记中，本文档主要介绍了如何运用Connect中间件和MongoDB技术来构建一个简单的记事本应用。作者以大熊君的身份分享了他的学习过程，并通过一个实际项目展示了如何实现用户注册、登录功能，以及基本的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值