Js 模拟注册界面基础学习

最新推荐文章于 2022-04-26 00:17:45 发布

Web攻城狮

最新推荐文章于 2022-04-26 00:17:45 发布

阅读量638

点赞数 1

分类专栏： js 文章标签： web HTML web前端 css Js 模拟注册界面

本文链接：https://blog.csdn.net/b1244154318/article/details/51921822

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

注册界面：

要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间

密码两次验证必须一致，用户名密码不能为空。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<title>模拟注册</title>
	<style type="text/css">
		*{margin:0;
		 padding:0; 
		 font-size:14px; 
		 font-famliy:"微软雅黑";
		 font-style:normal; }
		body{background:#FBFBFB;}
		.container{
			border:solid 1px #F1F1F1;
			width:400px;
			height:400px;
			background:#fff;
			margin:20px auto;
			padding-bottom:10px;
		}
		.container h1{
			font-size:22px;
			font-family:微软雅黑;
			text-align:center;
			color:#333;
			display:block;
			margin:20px;
			border:0px solid gray;
		}
		.div1{
		margin-left:25px;
		}
		#Name,#Pwd1,#Pwd2{
		color:gray;
		height:25px;
		width:180px;
		font-size:10px;
		padding-left:5px;
		margin-top:10px;
		margin-right:40px;}
		#btn{
		height:25px;
		width:60px;
		display:block;
		margin:10px auto;
		}
		#sex1,#sex2{
		margin-left:10px;
		margin-top:20px;
		line-height:30px;
		width:13px;
		border:1px solid gray;
		}
	</style>	
	<script>
		window.οnlοad= function(){
		    var name="";
			Name.onkeyup = function(){
		        name = Name.value;
		        Name.value = name.replace(/黄色|黄|枪|炮/g,"");
				}
			btn.onclick = function(){
				var pwd1 = Pwd1.value;
				var pwd2 = Pwd2.value;
			    //用户名密码不能为空的判断
				if(name == "" || pwd1 == "" || pwd2 == ""){
					alert("用户名或者密码不能为空！");
				}
				//不能以数字开头
				else if(name.charCodeAt(0) >= 48 && name.charCodeAt(0) <= 57){
				 alert("不能以数字开头！");
				}
				//用户名长度不能低于6位，高于20位
				else if(name.length < 6 || name.length > 20){
					alert("用户名长度不能低于6位，高于20位。");
				}
				//密码两次输入不一致的判断
				else if(pwd1 != pwd2){
					alert("两次密码输入不一致！请重新输入。");
					Pwd1.value="";
					Pwd2.value="";
				}
				//你输入的有不合法字符，只能以字母，数字下划线输入
				//0--9:48--57 A-Z:65-90 a-z:97-122 -:95
				for(var i = 0;i < name.length; i++ ){
					if(name.charCodeAt(i) < 48 ||( name.charCodeAt(i) > 57&&
					name.charCodeAt(i) < 65)||( name.charCodeAt(i) > 90 &&
					name.charCodeAt(i) < 95)||( name.charCodeAt(i) > 95 &&
					name.charCodeAt(i) < 97)|| name.charCodeAt(i) > 122 )
					{
					  alert("你输入的有不合法字符，只能以字母，数字下划线输入！");
					  break;
					}
				}
		    }
		}
	</script>
</head>
<body>
	<div class="container">
		<h1>注册</h1>
		<div class="div1">
		  用户名： <input type = "text" placeholder = "输入用户名" id = "Name"/><br/>
		  密码：  <input type = "text" placeholder = "输入密码" id = "Pwd1"/><br/>
		再次输入密码：<input type = "text" placeholder = "再次输入密码" id = "Pwd2"/>
		    性别：<input type="radio"  name="sext" id="sex1"/>  boy
		 <input type="radio"  name="sext"id="sex2"/>  girl
		 <input type="button" value="提交" id="btn"/>
		</div>
		
	</div>
	
</body>
</html>

Web攻城狮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js 模拟注册界面基础学习

注册界面：要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间密码两次验证必须一致，用户名密码不能为空。模拟注册 *{margin:0; padding:0; font-size:14px; font-famliy:"微软雅黑"; font-style:normal; } body{background:#F
复制链接

扫一扫