用户注册、验证-CSDN博客

本文链接：https://blog.csdn.net/make_a_difference/article/details/16930109

需求：最基础js用户注册、代码样例、记录曾经小白过

1、Html代码片段块

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人注册</title>
<script language="javascript" src="yanzheng.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<dl>
<dd>Email地址：<input id="email" type="text" class="register_input" onblur="checkEmail()"> </dd>
<dd id="email_Id"></dd>
</dl>
<br />
<dl>
<dd>设置昵称：<input id="nickName" type="text" class="register_input"></dd>
<dd  id="nickName_Id"></dd>
</dl>
<br />
<dl>
<dd>设定密码：<input id="pwd" type="password" class="register_input"></dd>
 <dd id="pwd_Id"></dd>
</dl>
<br />
<dl>
<dd>再输入一次密码：<input id="repwd" type="password" class="register_input"></dd>
<dd id="repwd_Id"></dd>
</dl>

</body>
</html>

2、js代码块

function searchId(va){
	return document.getElementById(va);
		return document.getElementById(va);
		//document.getElementById("email");
}

//将所有文本框单击效果放在一起
function inputOnclick(){
	//鼠标在打击和离开后的提示信息
		document.getElementById("email").onclick=function(){
			searchId("email").className="register_input_Focus";
			searchId("email_Id").innerHTML="此邮箱是你登录账号，并将用来接收验证邮箱";
			searchId("email_Id").className="register_prompt";
		}
	//鼠标在打击和离开后的提示信息
		searchId("nickName").onclick=function(){
			searchId("nickName").className="register_input_Focus";
			searchId("nickName_Id").innerHTML="昵称可由大小写因英文字母、数字_组成长度为4-20个字符";
			searchId("nickName_Id").className="register_prompt";
		}
	//密码框
		searchId("pwd").onclick=function(){
			searchId("pwd").className="register_input_Focus";
			searchId("pwd_Id").innerHTML="密码可由大小英文字母、数字组成长度为6-20个字符";
			searchId("pwd_Id").className="register_prompt";
		}
	//第二次输入密码
		searchId("repwd").onclick=function(){
			searchId("repwd").className="register_input_Focus";
			//searchId("repwd_Id").innerHTML="请再次输入密码";
			//searchId("repwd_Id").className="register_prompt_error";
		}
		searchId("email").onblur=checkEmail;
		searchId("nickName").onblur=checkName;
		searchId("pwd").onblur=checkPwd;
		searchId("repwd").onblur=checkRepwd;
}

//实现注册的email提示功能
function checkEmail(){
			var email=searchId("email").value;
			var email_Id=searchId("email_Id");//将提示信息显示在这个dd中
			var reg=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
			if(email==""){
				email_Id.innerHTML="亲!邮箱不能为空";
				email_Id.className="register_prompt_error";
				searchId("email").className="register_input_Blur";
				return false;
			}
			if(!reg.test(email)){
				email_Id.innerHTML="亲!邮箱格式不正确";
				email_Id.className="register_prompt_error";
				searchId("email").className="register_input_Blur";
				return false;
			}
			email_Id.className="register_prompt_ok";
			searchId("email").className="register_input";//正确后恢复到原来的样式
			email_Id.innerHTML="";
			return true;
}
//验证昵称
function checkName(){
			var nickName=searchId("nickName").value;
			var nickName_Id=searchId("nickName_Id");//将提示信息显示在这个dd中
			var reg=/^\w{4,20}$/;
			var china=/^[^\x00-\xff]$/;//匹配中文
			if(nickName==""){
				nickName_Id.innerHTML="亲!昵称不能为空";
				nickName_Id.className="register_prompt_error";
				searchId("nickName").className="register_input_Blur";
				return false;
			}
			if(!reg.test(nickName)){
				nickName_Id.innerHTML="亲!昵称输入不正确哦";
				nickName_Id.className="register_prompt_error";
				searchId("nickName").className="register_input_Blur";
				return false;
			}/*else if(!china.test(china)){
				nickName_Id.innerHTML="亲!昵称输入不正确哦";
				nickName_Id.className="register_prompt_error";
				searchId("nickName").className="register_input_Blur";
				return false;
			}*/
			nickName_Id.className="register_prompt_ok";
			searchId("nickName").className="register_input";//正确后恢复到原来的样式
			nickName_Id.innerHTML="";
			return true;
}

//验证密码
function checkPwd(){
			var pwd=searchId("pwd").value;
			var pwd_Id=searchId("pwd_Id");//将提示信息显示在这个dd中
			var reg=/^[A-Za-z0-9]+$/;
			if(pwd==""){
				pwd_Id.innerHTML="亲!密码不能为空";
				pwd_Id.className="register_prompt_error";
				searchId("pwd").className="register_input_Blur";
				return false;
			}
			if(!reg.test(pwd)){
				pwd_Id.innerHTML="亲!密码设置有误";
				pwd_Id.className="register_prompt_error";
				searchId("pwd").className="register_input_Blur";
				return false;
			}
			if(isNaN(pwd)==false){
				pwd_Id.innerHTML="亲!密码不能全部为数字";
				pwd_Id.className="register_prompt_error";
				searchId("pwd").className="register_input_Blur";
				return false;
			}
			pwd_Id.className="register_prompt_ok";
			searchId("pwd").className="register_input";//正确后恢复到原来的样式
			pwd_Id.innerHTML="";
			return true;
}
//验证两次输入的密码是否一样
function checkRepwd(){
			var repwd=searchId("repwd").value;
			var pwd=searchId("pwd").value;
			var repwd_Id=searchId("repwd_Id");//将提示信息显示在这个dd中
			if(repwd==""){
				repwd_Id.innerHTML="亲!请输入密码";
				repwd_Id.className="register_prompt_error";
				searchId("repwd").className="register_input_Blur";
				return false;
			}
			if(pwd!=repwd){
				repwd_Id.innerHTML="亲!两次输入密码不一致";
				repwd_Id.className="register_prompt_error";
				searchId("repwd").className="register_input_Blur";
				return false;
			}
			repwd_Id.className="register_prompt_ok";
			searchId("repwd").className="register_input";//正确后恢复到原来的样式
			repwd_Id.innerHTML="";
			return true;
}
function checkAll(){
		var email=checkEmail();//实email邮箱的验证功能
		var name=checkName();
		var pwd=checkPwd();
		var repwd=checkRepwd();
		return email&&name&&pwd&&repwd
	
}
window.onload=function(){
		inputOnclick();
		onsubmit=checkAll;
}

3、css代码块

dl,dd{
	 list-style:none;
	
}
dd{
	 float:left;		
}
/*	如果输入错误的话，则这是文本框的样式*/
	
.register_input_Blur{
	background-color:#fef4d0;
	width:200px;
	height:18px;
	border:solid 1px #999;
	margin:0px 0px 8px 0px;
	}
	/*鼠标单击文本框时文本本框的样式*/
.register_input_Focus{
	background-color:#f1ffde;
	width:200px;
	height:18px;
	border:solid 1px #999;
	margin:0px 0px 8px 0px;
	}
	/*当单击文本框的时候，文本框显示提示文本的样式*/
.register_prompt{
	font-size:12px;
	color:#999;
	}
	/*文本框中输入错误的时候，则提示信息的样式*/
.register_prompt_error{
	font-size:12px;
	color:#C8180B;
	border:solid 1px #999;
	background-color:#fef4d0;
	padding:0px 5px 0px 5px;
	height:18px;
	}
	/*输入正确后的提示样式*/
.register_prompt_ok{
	background-image:url(images/register_write_ok.gif);
	background-repeat:no-repeat;
	width:15px;
	height:11px;
	margin:5px 0px 0px 5px;
	}