模拟注册页面

今天在这里给大家分享的是如何用javascript来写出一个注册的页面。现在的网站和app大部分都需要登录以后才可以使用完整的功能，然而登录就需要用户名以及密码，想要它们承认这个用户名和密码，就需要注册。
我在这里提供的仅仅只是一个方法以及思路，并没有唯一方法，只有更加简单，有效的（初学，不喜勿喷）。
接下来我就来谈一谈我的方法，首先，先用HTML将整个页面的大致布局写出来，我这里使用的主要是input标签，当然还可以使用表单等等。如下代码所示：

<form>
		<div>
			<span class="txt1">用户名</span>
			<input type="text" placeholder="  请设置用户名" class="input1">
			<span class="txt2" id="text1">设置后不可更改，中英文均可，最长14个英文或7个汉字</span>
			<span id="text3">用户名仅支持中英文、数字和下划线，且不能为纯数字</span>
		</div>
		<div>
			<span class="txt1">手机号</span>
			<input type="text" placeholder="  可用于登录和找回密码" class="input1">
			<span id="text2">请输入中国大陆手机号，其他用户不可见</span>
			<span id="phone">手机号码格式不正确</span>
		</div>
		<div>
			<span class="txt1">密码</span>
			<input type="password" placeholder="  请设置登录密码" class="input2">
			<div id="list">
				<ul>
					<li id="li1">长度为8~14个字符</li>
					<li id="li2">支持数字，大小写和标点符号</li>
					<li id="li3">不允许有空格</li>
				</ul>
			</div>
		</div>
		<div>
			<span class="txt1">验证码</span>
			<input type="text" placeholder="  请设置验证码" class="input3">
			<input type="button" value="获取短信验证码" class="input3">
			<span id="erific">验证码错误</span>
		</div>
		<div class="txt3">
		<span class="txt2">
			<input type="checkbox" id="check">
			<label for="check">阅读并接受</label>
			<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
		</span>
			<a id="agreement">请勾选“阅读并接受百度用户协议”</a>
		</div>
		<div>
			<input type="button" value="注册" class="input4">
		</div>
	</form>

在用HTML将页面的大致布局做出来后，使用css将页面美化以及进行调整，按照自己的想法或者审美观再或者根据需求来做出改动，以下是我写的css代码：

.txt1{
		font-size: 15px;
	}
	a{
		text-decoration: none;
		color: #1B66C7;
	}
	.txt2{
		font-size: 10px;
	}
	.input1{
		width: 350px;
		height: 30px;
		border: 1px solid #DDDDDD;
		margin: 10px 0 10px 10px;
	}
	.input2{
		width: 350px;
		height: 30px;
		border: 1px solid #DDDDDD;
		margin: 10px 0 10px 25px;
	}
	.input3{
		width: 165px;
		height: 30px;
		margin: 10px 0 10px 10px;
		border: none;
		border: 1px solid #DDDDDD;
	}
	.input4{
		width: 350px;
		height: 35px;
		margin: 10px 0 10px 55px;
		background-color: #3F89EC;
		color: #fff;
		border: none;
	}
	.txt3{
		margin: 10px 0 10px 55px;
	}
	#text1{
		display: none;
	}
	#text2{
		font-size: 10px;
		display: none;
	}
	#text3{
		font-size: 10px;
		display: none;
		color: #FC4343;
	}
	#phone{
		font-size: 10px;
		display: none;
		color: #FC4343;
	}
	#list{
		font-size: 10px;
		position: absolute;
		display: none;
	}
	#erific{
		font-size: 10px;
		color: #FC4343;
		display: none;
	}
	#agreement{
		font-size: 10px;
		color: red;
		text-decoration: none;
		display: none;
	}

当前面两个步骤完成以后，接下来就到了最关键的js环节了，如何才能将效果写入代码并实现指定的功能呢？在之前我已经说了，我只能提供一种思路，并不是最优的，但是是可行。
首先，要想让HTML页面实现指定的功能，第一步当然是先获取到HTML页面上的标签，通过获取到的标签来实现功能的添加以及删除，如下代码所示：

//获得用户名的inpunt标签
var form = document.forms[0];
// 获得inpunt标签后的提示
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
//输入错误后提示
var text3 = document.getElementById("text3");

获取到我们想要的标签后，接下来就是添加功能的时候了，用获得焦点以及失去焦点的方法来实现鼠标点击后要出现的效果
在这里需要注意的是判断输入是否符合规范使用的是正则表达式来进行的检测，在失去焦点时自动检测，不符合规范的给出提示

// 获得焦点时显示
// 用户名
form[0].onfocus = function (){
	text1.style.display = "inline";
	//获得焦点时隐藏错误提示
	text3.style.display = "none";
	form[0].style.border = "1px solid #DDDDDD";
}
// 手机号
form[1].onfocus = function (){
	text2.style.display = "inline";
	//获得焦点时隐藏错误提示
	phone.style.display = "none";
	form[1].style.border = "1px solid #DDDDDD";
}
// 获得焦点时显示ul
// 密码
form[2].onfocus = function (){
	list.style.display = "inline";
	form[2].style.border = "1px solid #DDDDDD";
}
// 失去焦点时隐藏
// 用户名
form[0].onblur = function (){
	text1.style.display = "none";
	//判断输入是否符合规范
	var reg =/^(\w{1,14}|[\u4e00-\u9fa5]{1,7})$/;
	if (reg.test(this.value) || form[0].value == "") {
		//符合条件时隐藏提示
		text3.style.display = "none";
	}else{
		//不符合时显示
		text3.style.display = "inline";
		text1.style.display = "none";
		form[0].style.border = "1px solid red";
	}
}
// 手机号
form[1].onblur = function (){
	text2.style.display = "none";
	// 判断是否符合规范
	var reg = /^[1][3-9][0-9]{9}$/;
	if (reg.test(this.value) || form[1].value == "") {
		phone.style.display = "none";
	}else{
		phone.style.display = "inline";
		form[1].style.border = "1px solid red";
	}
}
//失去焦点时隐藏ul
//密码
form[2].onblur = function (){
	var reg = /^(\w{8,14})[,.!;，。、？?]\s+$/;
	list.style.display = "none";
	//8~14个字符
	if (reg.test(this.value) || form[2].value == "") {
		list.style.display = "none";
		list.style.color = "black";
	}else{
		list.style.display = "inline";
		list.style.color = "red";
		form[2].style.border = "1px solid red";
	}
}

在注册账号时会用到手机验证码来进行绑定的操作，在这里我用获取随机数的方法代替了

//获取验证码
form[4].onclick = function (){
	var arr = [];
	// a-z
	for(var u = 97;u <= 122;u++){
		arr.push(String.fromCharCode(u));
	}
	// A-Z
	for(var u = 65;u <= 90;u++){
		arr.push(String.fromCharCode(u));
	}
	// 0-9
	for(var n = 0;n <= 9;n++){
		arr.push(String.fromCharCode(n));
	}
	for(var i = 0,code=[],hash = [];i<4;i++){
		do{
			var r = parseInt(Math.random()*62);
		}while(hash[arr[r]]!=undefined);
		hash[arr[r]] = true;
		code.push(arr[r]);
	}
	this.value = code.join('');
	console.log(this.value = code.join(''))
}

最后就是提交按钮了，提交按钮实现的功能是在点击提交按钮时会检测前面是否有空的或者不符合规范的输入，如果没有就提交，有就给出提示，不提交

// 提交
form[6].onclick = function (){
	// 检测是否符合标准
	// 用户名
	if (/^(\w{1,14}|[\u4e00-\u9fa5]{1,7})$/.test(form[0].value)) {
		text3.style.display = "none";
	}else{
		text3.style.display = "inline";
		text1.style.display = "none";
		form[0].style.border = "1px solid red";
	}
	//手机号
	if (/^[1][3-9][0-9]{9}$/.test(form[1].value)) {
		phone.style.display = "none";
	}else{
		phone.style.display = "inline";
		form[1].style.border = "1px solid red";
	}
	// 密码
	if (/^(\w{8,14})[,.!;，。、？?]\s+$/.test(form[2].value)) {
		list.style.display = "none";
		list.style.color = "black";
	}else{
		list.style.display = "inline";
		list.style.color = "red";
		form[2].style.border = "1px solid red";
	}
	// 验证码
	if (form[3].value == form[4].value) {
		erific.style.display = "none";
	}else{
		erific.style.display = "inline";
		form[3].style.border = "1px solid red";
	}
	//协议
	if (form[5].checked == true) {
		agreement.style.display = "none";
	}else{
		agreement.style.display = "inline";
	}
}

完整代码如下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	.txt1{
		font-size: 15px;
	}
	a{
		text-decoration: none;
		color: #1B66C7;
	}
	.txt2{
		font-size: 10px;
	}
	.input1{
		width: 350px;
		height: 30px;
		border: 1px solid #DDDDDD;
		margin: 10px 0 10px 10px;
	}
	.input2{
		width: 350px;
		height: 30px;
		border: 1px solid #DDDDDD;
		margin: 10px 0 10px 25px;
	}
	.input3{
		width: 165px;
		height: 30px;
		margin: 10px 0 10px 10px;
		border: none;
		border: 1px solid #DDDDDD;
	}
	.input4{
		width: 350px;
		height: 35px;
		margin: 10px 0 10px 55px;
		background-color: #3F89EC;
		color: #fff;
		border: none;
	}
	.txt3{
		margin: 10px 0 10px 55px;
	}
	#text1{
		display: none;
	}
	#text2{
		font-size: 10px;
		display: none;
	}
	#text3{
		font-size: 10px;
		display: none;
		color: #FC4343;
	}
	#phone{
		font-size: 10px;
		display: none;
		color: #FC4343;
	}
	#list{
		font-size: 10px;
		position: absolute;
		display: none;
	}
	#erific{
		font-size: 10px;
		color: #FC4343;
		display: none;
	}
	#agreement{
		font-size: 10px;
		color: red;
		text-decoration: none;
		display: none;
	}
</style>
<body>
	<form>
		<div>
			<span class="txt1">用户名</span>
			<input type="text" placeholder="  请设置用户名" class="input1">
			<span class="txt2" id="text1">设置后不可更改，中英文均可，最长14个英文或7个汉字</span>
			<span id="text3">用户名仅支持中英文、数字和下划线，且不能为纯数字</span>
		</div>
		<div>
			<span class="txt1">手机号</span>
			<input type="text" placeholder="  可用于登录和找回密码" class="input1">
			<span id="text2">请输入中国大陆手机号，其他用户不可见</span>
			<span id="phone">手机号码格式不正确</span>
		</div>
		<div>
			<span class="txt1">密码</span>
			<input type="password" placeholder="  请设置登录密码" class="input2">
			<div id="list">
				<ul>
					<li id="li1">长度为8~14个字符</li>
					<li id="li2">支持数字，大小写和标点符号</li>
					<li id="li3">不允许有空格</li>
				</ul>
			</div>
		</div>
		<div>
			<span class="txt1">验证码</span>
			<input type="text" placeholder="  请设置验证码" class="input3">
			<input type="button" value="获取短信验证码" class="input3">
			<span id="erific">验证码错误</span>
		</div>
		<div class="txt3">
		<span class="txt2">
			<input type="checkbox" id="check">
			<label for="check">阅读并接受</label>
			<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
		</span>
			<a id="agreement">请勾选“阅读并接受百度用户协议”</a>
		</div>
		<div>
			<input type="button" value="注册" class="input4">
		</div>
	</form>


	<script src = "百度.js"></script>
</body>
</html>

javascript

//获得用户名的inpunt标签
var form = document.forms[0];
// 获得inpunt标签后的提示
var text1 = document.getElementById("text1");
var text2 = document.getElementById("text2");
//输入错误后提示
var text3 = document.getElementById("text3");
// console.log(text1)
// 获得焦点时显示
// 用户名
form[0].onfocus = function (){
	text1.style.display = "inline";
	//获得焦点时隐藏错误提示
	text3.style.display = "none";
	form[0].style.border = "1px solid #DDDDDD";
}
// 手机号
form[1].onfocus = function (){
	text2.style.display = "inline";
	//获得焦点时隐藏错误提示
	phone.style.display = "none";
	form[1].style.border = "1px solid #DDDDDD";
}
// 获得焦点时显示ul
// 密码
form[2].onfocus = function (){
	list.style.display = "inline";
	form[2].style.border = "1px solid #DDDDDD";
}
// 失去焦点时隐藏
// 用户名
form[0].onblur = function (){
	text1.style.display = "none";
	//判断输入是否符合规范
	var reg =/^(\w{1,14}|[\u4e00-\u9fa5]{1,7})$/;
	if (reg.test(this.value) || form[0].value == "") {
		//符合条件时隐藏提示
		text3.style.display = "none";
	}else{
		//不符合时显示
		text3.style.display = "inline";
		text1.style.display = "none";
		form[0].style.border = "1px solid red";
	}
}
// 手机号
form[1].onblur = function (){
	text2.style.display = "none";
	// 判断是否符合规范
	var reg = /^[1][3-9][0-9]{9}$/;
	if (reg.test(this.value) || form[1].value == "") {
		phone.style.display = "none";
	}else{
		phone.style.display = "inline";
		form[1].style.border = "1px solid red";
	}
}
//失去焦点时隐藏ul
//密码
form[2].onblur = function (){
	var reg = /^(\w{8,14})[,.!;，。、？?]\s+$/;
	list.style.display = "none";
	//8~14个字符
	if (reg.test(this.value) || form[2].value == "") {
		list.style.display = "none";
		list.style.color = "black";
	}else{
		list.style.display = "inline";
		list.style.color = "red";
		form[2].style.border = "1px solid red";
	}
}
//获取验证码
form[4].onclick = function (){
	var arr = [];
	// a-z
	for(var u = 97;u <= 122;u++){
		arr.push(String.fromCharCode(u));
	}
	// A-Z
	for(var u = 65;u <= 90;u++){
		arr.push(String.fromCharCode(u));
	}
	// 0-9
	for(var n = 0;n <= 9;n++){
		arr.push(String.fromCharCode(n));
	}
	for(var i = 0,code=[],hash = [];i<4;i++){
		do{
			var r = parseInt(Math.random()*62);
		}while(hash[arr[r]]!=undefined);
		hash[arr[r]] = true;
		code.push(arr[r]);
	}
	this.value = code.join('');
	console.log(this.value = code.join(''))
}
// 提交
form[6].onclick = function (){
	// 检测是否符合标准
	// 用户名
	if (/^(\w{1,14}|[\u4e00-\u9fa5]{1,7})$/.test(form[0].value)) {
		text3.style.display = "none";
	}else{
		text3.style.display = "inline";
		text1.style.display = "none";
		form[0].style.border = "1px solid red";
	}
	//手机号
	if (/^[1][3-9][0-9]{9}$/.test(form[1].value)) {
		phone.style.display = "none";
	}else{
		phone.style.display = "inline";
		form[1].style.border = "1px solid red";
	}
	// 密码
	if (/^(\w{8,14})[,.!;，。、？?]\s+$/.test(form[2].value)) {
		list.style.display = "none";
		list.style.color = "black";
	}else{
		list.style.display = "inline";
		list.style.color = "red";
		form[2].style.border = "1px solid red";
	}
	// 验证码
	if (form[3].value == form[4].value) {
		erific.style.display = "none";
	}else{
		erific.style.display = "inline";
		form[3].style.border = "1px solid red";
	}
	//协议
	if (form[5].checked == true) {
		agreement.style.display = "none";
	}else{
		agreement.style.display = "inline";
	}
}