javascript用户注册页面 js做注册页面

转载

mob64ca13faa4e6 2023-10-06 19:57:51

文章标签 javascript用户注册页面 HTML+CSS+JS 注册界面用户名验证码 文章分类 JavaScript 前端开发

采用HTML+CSS+JS设计一个注册界面（register.html）：包含“请输入用户名”、“请输入密码”、“请再次输入密码”，并添加一个“验证码生成框”和“注册按钮”
1.1如果用户名框为空，弹出对话框提示“很抱歉，用户名不能为空!”，点击确定后，并将输入光标聚焦到用户名的输入框中

javascript用户注册页面 js做注册页面_用户名

javascript用户注册页面 js做注册页面_注册界面_02

1.2如果密码框为空，弹出对话框提示“很抱歉，密码不能为空!”，点击确定后，并将输入光标聚焦到密码的输入框中

javascript用户注册页面 js做注册页面_HTML+CSS+JS_03

javascript用户注册页面 js做注册页面_HTML+CSS+JS_04

javascript用户注册页面 js做注册页面_用户名_05

javascript用户注册页面 js做注册页面_javascript用户注册页面_06

1.3如果验证码框为空，弹出对话框提示“请输入验证码!”，点击确定后，并将输入光标聚焦到验证码的输入框中

javascript用户注册页面 js做注册页面_用户名_07

javascript用户注册页面 js做注册页面_用户名_08

1.4判断输入的用户名是否与已有的用户名重复（“Admin”），如重复返回“很抱歉，该用户名已注册，请更换注册用户名!”，点击确定后，并将输入光标聚焦到用户名的输入框中

javascript用户注册页面 js做注册页面_验证码_09

javascript用户注册页面 js做注册页面_javascript用户注册页面_10

1.5判断两次用户密码输入是否一致，如果不一致，弹出对话框提示“输入的密码不一致，请重新输入！”，并删除密码框中的内容，点击确定后，将输入光标聚焦到“请输入密码”的输入框中

javascript用户注册页面 js做注册页面_注册界面_11

javascript用户注册页面 js做注册页面_验证码_12

1.6如果验证码输入错误，弹出对话框提示“验证码输入错误！”

javascript用户注册页面 js做注册页面_注册界面_13

1.7如果全部输入正确，则弹出对话框提示“恭喜***注册成功！”，其中“***”中是新注册的用户名，点击确定后，并跳转到index.html页面。

javascript用户注册页面 js做注册页面_javascript用户注册页面_14

index.html页面是自己设计的主页面，这里就不给出来了。

源代码：
register.html

<!DOCTYPE html>
<html>
<head>
  <title>注册页面</title>
  <link rel="stylesheet" type="text/css" href=".\css\style_1.css" /> 
  <script type="text/javascript" src=".\js\myscript_1.js"></script>  
</head>
<body>
  <div  class="login1">
    <span class="login1_1">用户注册</span>
  </div>
  <div class="login2">
    <span class="login2_1">  请输入用户名:</span>
	<input type="text" name="username" id="usr" class="usr_name"> 
    <span class="color">*</span>
  </div>
  
  <div class="login3">
    <span class="login3_1">    请输入密码:</span>
	<input type="password" name="password" id="pwd" class="pass_word"> 
     <span class="color">*</span>
  </div>
  
  <div class="login4">
    <span class="login4_1">请再次输入密码:</span>
	<input type="password" name="password_1" id="pwd_1" class="pass_word_1"> 
    <span class="color">*</span>
  </div>
  
  <div class="login5">
    <span class="login5_1">        验证码:</span>
	<input type="text" id="input1" class="input_code">
    <input type="button" id="checkCode" class="codeJS" value="生成验证码" onclick="createCode()"/> 
    <span class="color">*</span>
  </div>
  
  <div class="login6">
    <input type="button" id="sumbitButton" value="注册" onclick="registerValidate()"/>
  </div>
</body>
</html>

style_1.css

*{ font-size:12px; font-family:"宋体"; color:black;margin:0 auto;}

body{ margin:0; background-color:#DCDCDC;}
input{ border:none;}

.color{
            color:#FF0000;
}
.login1 {
	background-image:url(../images/sky.jpg);
	width:400px;
	height:120px;
	overflow:hidden;
	text-align:center;
	line-height: 120px;
	letter-spacing:10px;
	margin-bottom:2px;
}

.login1_1 {
	font-size:60px;
	font-weight:bold;
	color:#FFA500;
}

.login2 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login2_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.usr_name {
	padding-top:6px;
	height:20px;
	width:150px;
}

.login3 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login3_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word {
	padding-top:6px;
	height:20px;
	width:150px;
}


.login4 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	margin-bottom:1px;
}

.login4_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.pass_word_1 {
	padding-top:6px;
	height:20px;
	width:150px;
}
.login5 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	//letter-spacing:10px;
	margin-bottom:1px;
}

.login5_1 {
	font-size:20px;
	font-weight:bold;
	color:black;
}

.input_code {
	padding-top:3px;
	height:20px;
	width:70px;
}

.codeJS {
	background-color:#E6E6FA;
	padding-top:3px;
	height:24px;
	width:70px;
	font-style:italic;
	font-size:12px;
	font-weight:bold;
	color:#D2691E;
}

.login6 {
	background:#7FFFAA;
	width:400px;
	height:50px;
	overflow:hidden;
	text-align:center;
	line-height: 50px;
	letter-spacing:10px;
}

.login6 input {
	background-color:#6495ED;
	font-size:18px;
	padding-left:16px;
	letter-spacing:10px;
	font-weight:bold;
	color:red;
}

myscript_1.js

var code;

function createCode() {
	var codeLength = 4;
	var checkCode = document.getElementById("checkCode");
	var selectChar = new Array(2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
	var charIndex = Math.floor(Math.random() * 32);
	code = selectChar[charIndex];
	for (var i = 1; i < codeLength; i++) {
		var charIndex = Math.floor(Math.random() * 32);
		code += selectChar[charIndex];
	}
	if (code.length != codeLength) {
		createCode();
	}
	document.getElementById("checkCode").value = code;
}

function registerValidate() {
	var inputCode = document.getElementById("input1").value.toUpperCase();
	var usrName = document.getElementById("usr").value;
	var passWD = document.getElementById("pwd").value;
                var passWD_1 = document.getElementById("pwd_1").value;
                if(usrName=="Admin"){
                                 alert("很抱歉，该用户名已注册，请更换注册用户名!");
                                 document.getElementById("usr").focus();
                                 return false;
              }
                if(usrName==""){
                                 alert("很抱歉，用户名不能为空!");
                                 document.getElementById("usr").focus();
                                 return false;
              }
               if(passWD==""){
                                 alert("很抱歉，密码不能为空!");
                                 document.getElementById("pwd").focus();
                                 return false;
              }
              if(passWD_1==""){
                                 alert("很抱歉，请确认输入密码!");
                                 document.getElementById("pwd_1").focus();
                                 return false;
              }
               if(inputCode==""){
                                 alert("请输入验证码");
                                 document.getElementById("input1") .focus();
                                 return false;
              }
             if(passWD!=passWD_1){
                                 alert("输入的密码不一致，请重新输入！");
                                 document.getElementById("pwd").value="";
                                 document.getElementById("pwd_1").value="";
                                 document.getElementById("pwd").focus();
                                 return false;
              }
              if  (passWD==passWD_1) {
                if (inputCode != code) {
		alert("验证码输入错误！");
		createCode();
		document.getElementById("input1").value="";
		return false;
	}
                else {
		alert("恭喜"+usrName+"注册成功！");
		jump("index.html");
		return true;
	}
    }     
}

function jump(address) {
	if (address == null)
		window.location.href="http://www.sina.com.cn";
	else
		window.location.href=address;
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。