网页截图
登录
首先是登录页面。特别说明一下，如果真的要实现用户名和密码配对功能的话，要连接数据库做。因为这里我只是对JavaScript技术的学习，没有连接数据库，所以不论输入什么密码都会显示错误。
验证码是利用随机函数生成的，验证码的验证就是正则表达式的应用了。
点击小眼睛图标可以显示你输入的密码。
点验证码图片还可以换一张新的验证码。这次验证码输入正确了。
因为没有连数据库验证用户名和密码是否匹配，点登录是没有用滴（就算有用我也没做主页网站哈哈^_^）。
注册
在刚才的登录界面点击注册按钮，就可以转到注册页面。
填写信息啦，我写写写。注意爱好可以多选，但是学业只能单选哦。
咦，怎么除了姓名全写错了？这个格式检验功能也太精确了吧！（自卖自夸中，大家不要理我）
哦哦，这次基本写对了。
(づ｡◕‿‿◕｡)づ宝宝想再写一次？点重写，帮你重新开始。
代码
login.html
登录
<script type="text/javascript">
var str;window.addEventListener ("load",Cha,false);
/*判断验证码是否正确*/
function Code(){
var scode=document.getElementById ("scode");
var code=document.getElementById ("code");if(code.value==""||code.value!=str){
scode.innerHTML="错误";
scode.style.backgroundColor="red";}else{scode.innerHTML="正确";
scode.style.backgroundColor="green";}}
/*判断验密码格式是否正确*/
function Password(){
var password=document. getElementById("password");
var spass=document.getElementById ("spanp"); if(password.value=="")
{spass.innerHTML="错误";
spass.style.backgroundColor="red";}else{spass.innerHTML="正确";
spass.style.backgroundColor="green";}
if(password.value.length<8||password.value.length>20){
spass.innerHTML="错误";
spass.style.backgroundColor="red";}else{spass.innerHTML="正确";
spass.style.backgroundColor="green";}}
/*判断用户名格式是否正确*/
function Name(){
var name=document.getElementById ("name");
var sname=document.getElementById ("spann"); if(name.value==""){
sname.innerHTML="错误";
sname.style.backgroundColor="red";}else{sname.innerHTML="正确";
sname.style.backgroundColor="green";}}
/*判断数据提交前数据的验证*/
function Check(){
var name=document.getElementById ("name");
var password=document. getElementById("password");
var sname=document.getElementById ("spann");
var spass=document.getElementById ("spanp");
var scode=document.getElementById ("scode"); var c=true;
var code=document.getElementById ("code");
if(code.value==""||code.value!=str){CHa(); c=false;
scode.innerHTML="错误";
scode.style.backgroundColor="red";}else{scode.innerHTML="正确";
scode.style.backgroundColor="green";}if(name.value==""){
sname.innerHTML="错误";
sname.style.backgroundColor="red";c=false;}else{
sname.innerHTML="正确";
sname.style.backgroundColor="green";}if(password.value==""){
spass.innerHTML="错误";
spass.style.backgroundColor="red";c=false; }else{
spass.innerHTML="正确";
spass.style.backgroundColor="green";}if(password.value.length<8||password.value.length>20){
spass.innerHTML="错误";
spass.style.backgroundColor="red";c=false;}else{
spass.innerHTML="正确";
spass.style.backgroundColor="green";}return c;}
function register(){
window.location.href="register.html";}
/*产生验证码*/
function Cha(){
var a=new Array(10);var k=0;
for(k=0;k<10;k++){a[k]=k;}
var t1=Math.round (Math.random()*9);
var t2=Math.round (Math.random()*9);
var t3=Math.round (Math.random()*9);
var t4=Math.round (Math.random()*9);
var ss=new Array(4);
ss[0]=a[t1];ss[1]=a[t2];
ss[2]=a[t3];ss[3]=a[t4];
str=ss.join("");
var pain=document.getElementById ("canv");
var draw=pain.getContext("2d");
draw.clearRect(0,0,60,60);
draw.font="20px Times New Roman";
draw.fillText(str,pain.width/10,pain.height/1.5); draw.stroke()
}</script>
#login{margin:200px;width:340px;
height:240px; border: #0FF thin solid;border-radius:20px;
position:relative;}.namel{
width:60px;height:20px;
position:absolute;top:60px;
left:5px;}#name{
width:160px;height:20px;
border-radius:5px;
position:absolute;top:60px;
left:70px;}#spann{
width:40px;height:20px;
position:absolute;top:60px;
left:260px;}.passwdl,.codel{
width:60px;height:20px;
position:absolute;top:110px;
left:5px;}#password{
width:160px;height:20px;
border-radius:5px;
position:absolute;top:110px;
left:70px;}#spanp,#scode{
width:40px;height:20px;
position:absolute;top:110px;
left:260px;}.title{
font-size:30px;color:#00F;}
#loginb{position:absolute;
top:200px; left:180px;}
#register1{position:absolute;
top:200px;left:260px;}
.codel,#code,canvas,#scode{
position:absolute;top:160px;}
#code{width:100px;height:20px;
border-radius:5px;position:absolute;left:70px;}canvas{
position:absolute;left:180px;
background-color:#3FF;}#scode{
position:absolute;left:250px;}
登录
用户名:
密 码:
验证码
不支持canvas
register.html
注册
<script type="text/javascript">
function Phone(){
var sphone=document.getElementById("sph");
var phone=document.getElementById("phone");
var ph=true;if(phone.value==""){
sphone.innerHTML="电话号码不能为空";
sphone.style.backgroundColor="red"; c=false;ph=false; }
if(phone.value.length!=11){
sphone.innerHTML="电话号码必须是11位";
sphone.style.backgroundColor="red"; c=false;ph=false; }
if(isNaN(phone.value)){
sphone.innerHTML="电话号码必须由数字组成";
sphone.style.backgroundColor="red"; c=false;ph=false;}if(ph){
sphone.innerHTML="格式正确";
sphone.style.backgroundColor="green";}}function Email(){
var email=document.getElementById ("email");
var semail=document.getElementById("se");var se=true;
if(String(email.value).indexOf("@")==-1||String(email.value).indexOf(".")==-1){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red"; c=false;se=false;}else{
if((String(email.value).indexOf("@")+1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@")-1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@"))>(String(email.value).indexOf("."))){
semail.innerHTML="格式不对";
email.style.backgroundColor="red";c=false;se=false;}else{
var str=(String(email.value)). match("(.*?)(@)(.*)(\\.)(.*)");
var h3=str[3];var h4=str[4];
var h5=str[5];f(isNaN(str[1])){
semail.innerHTML="格式不对"; semail.style.backgroundColor="red";se=false;}else if(str[1]. length<5|| str[1].length>11){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";se=false;}}}else{
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";se=false;}if(h5!="com"){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";se=false;}}}if(se){
semail.innerHTML="格式正确";
semail.style.backgroundColor="green";}}
function Confirm(){
var scon=document.getElementById ("sc");
var password=document. getElementById("passwd");
var confirmpass=document. getElementById("conpass");
var sc=true;
if(confirmpass.value!=""){
if(confirmpass.value!=password.value){
scon.innerHTML="密码不一致";
scon.style.backgroundColor="red"; sc=false;}}else{if(sp){
scon.innerHTML="密码不一致"; scon.style.backgroundColor="red"; c=false;sc=false;}else{sc=false;}}if(sc){scon.innerHTML="正确";
scon.style.backgroundColor="green"; }}
function Password(){
var password=document. getElementById("passwd");
var spass=document. getElementById("sp");var sp=true;
if(password.value==""){
spass.innerHTML="密码不能为空";
spass.style.backgroundColor="red";sp=false;}
if(password.value.length>20||password.value.length<8){
spass.innerHTML="密码长度在8~20之间";
spass.style.backgroundColor="red";sp=false;}if(sp){
spass.innerHTML="正确";
spass.style.backgroundColor="green";}}
function Name(){
var name=document. getElementById("name");
var sname=document. getElementById("sn");
if(name.value==""){
sname.innerHTML="用户名不能为空";
sname.style.backgroundColor="red";}else{
sname.innerHTML="正确";
sname.style.backgroundColor="green";}}function Check(){
var name=document. getElementById("name");
var password=document. getElementById("passwd");
var email=document. getElementById("email");
var phone=document. getElementById("phone");
var confirmpass=document. getElementById("conpass");
var sname=document. getElementById("sn");
var spass=document. getElementById("sp");
var semail=document. getElementById("se");
var scon=document. getElementById("sc");
var sphone=document. getElementById("sph");
var c=true;var sp=true;
var sn=true;var se=true;
var sc=true;var ph=true;
if(name.value==""){
sname.innerHTML="用户名不能为空";
sname.style.backgroundColor="red";c=false; sn=false;}
if(password.value==""){
spass.innerHTML="密码不能为空";
spass.style.backgroundColor="red";c=false; sp=false;}
if(password.value.length>20||password.value.length<8){
spass.innerHTML="密码长度在8~20之间";
spass.style.backgroundColor="red";c=false;sp=false;}if(phone.value==""){
sphone.innerHTML="电话号码不能为空";
sphone.style.backgroundColor="red"; c=false;ph=false; }
if(phone.value.length!=11){
sphone.innerHTML="电话号码必须是11位";
sphone.style.backgroundColor="red";c=false;ph=false;}
if(isNaN(phone.value)){
sphone.innerHTML="电话号码必须由数字组成";
sphone.style.backgroundColor="red";c=false;ph=false;}
if(confirmpass.value!=""){
if(confirmpass.value!=password.value){
scon.innerHTML="密码不一致"; scon.style.backgroundColor="red"; c=false;sc=false;}}else{if(sp){
scon.innerHTML="密码不一致";
scon.style.backgroundColor="red"; c=false;sc=false;}else{sc=false;}}if(String(email.value).indexOf("@")==-1||String(email.value).indexOf(".")==-1){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}else{
if((String(email.value).indexOf("@")+1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@")-1)==(String(email.value).indexOf("."))||(String(email.value).indexOf("@"))>(String(email.value).indexOf("."))){
semail.innerHTML="格式不对"; semail.style.backgroundColor="red";c=false;se=false;}else{
var str=(String(email.value )).match("(.*?)(@)(.*)(\\.)(.*)");
var h3=str[3];var h4=str[4];
var h5=str[5];
iff(isNaN(str[1])){
semail.innerHTML="格式不对"; semail.style.backgroundColor="red";c=false;se=false;}else if (str[1].length<5||str[1].length>11){
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}}}else{
semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}if(h5!="com"){ semail.innerHTML="格式不对";
semail.style.backgroundColor="red";c=false;se=false;}}}if(sn){
sname.innerHTML="格式正确";
sname.style.backgroundColor="green";}if(se){semail.innerHTML="格式正确";
semail.style.backgroundColor="green";}if(sc){
scon.innerHTML="密码一致";
scon.style.backgroundColor="green"; }if(sp){
spass.innerHTML="密码格式正确";spass.style.backgroundColor="green";}if(ph){
sphone.innerHTML="格式正确";
sphone.style.backgroundColor="green";}return c;}
function Display(e){
var node=document.getElementById ("basenews")
var s=String (document.getElementById("bases").value);
if(node.style.display=="block") {
var st="+请填写基本信息";
document.getElementById("bases").innerHTML=st;node.style.display="none";}else{
var st="-请填写基本信息";
document.getElementById("bases").innerHTML=st;
node.style.display="block";}}
function Display1(e){
var node=document.getElementById ("hobbynews");
var s=String (document.getElementById("hobbys").value);
if(node.style.display=="block"){
document.getElementById("hobbys").innerHTML="+请选择你的爱好";
node.style.display="none";}else{
document.getElementById("hobbys").innerHTML="-请选择你的爱好";
node.style.display="block";}}
function Display2(e){
var node=document.getElementById ("professionnew");
var s=String (document.getElementById("professions").value);
if(node.style.display=="block"){
var st="+请选择你的学业";
document.getElementById("professions").innerHTML=st;
node.style.display="none";}else{
var st="-请选择你的学业";
document.getElementById("professions").innerHTML=st;
node.style.display="block";}}
</script>
#registerForm{clear:both;
margin-top:60px;width:800px;
height:auto;overflow:hidden;
border:#0CC thin solid;
border-radius:30px;
position:relative;}
#registerF{font-size:36px;}
#base{width:700px;height:auto;
border:#0F3 thin solid;
border-radius:20px;
position:relative;
overflow:hidden;margin-top:10px;
#hobby,#profession{clear:both;
width:700px;height:auto;
border:#0F3 thin solid;
border-radius:10px;
position:relative;
overflow:hidden;margin-top:10px;
}#basenews{clear:both;
width:680px;height:300px;
position:relative;}
#base span,#base label{
float:left;}
#hobbynews,#professionnew{
clear:both;width:inherit;
height:80px;display:none;}
#hobby span,#hobby label{
display:block;width:auto;
height:30px;float:left;}
#profession span,#profession label{display:block;
width:auto;height:30px;
float:left;}#base span{
display:block;width:auto;
height:30px;float:left;}
#basenews #namel,#basenews #passl,#basenews #conpassl,#basenews #emaill,#basenews #phonel{
clear:both;width:80px;
height:20px;position:absolute;
left:100px;}#basenews #name,#basenews #passwd,#basenews #conpass,#basenews #email,#basenews #phone{
clear:both;width:120px;
height:20px;border-radius:5px;
position:absolute;left:200px;}
#basenews #sn,#basenews #sp,#basenews #sc,#basenews #se,#basenews #sph{
display:block;width:180px;
height:20px;position:absolute;
left:350px;}#basenews #namel,#basenews #name,#basenews #sn{position:absolute;
top:10px;}#basenews #passl,#basenews #passwd,#basenews #sp{
position:absolute;top:60px;}
#basenews #conpassl,#basenews #conpass,#basenews #sc{
position:absolute;top:110px;}
#basenews #emaill,#basenews #email,#basenews #se{
position:absolute;top:160px;}
#basenews #phonel,#basenews #phone,#basenews #sph{
position:absolute;top:210px;}
#readbookl,#gyml,#travell,#eatl{
width:60px;height:20px;}
#readbookl,#gyml,#readbook,#gym{
position:absolute;top:50px;}
#travell,#eatl,#travel,#eat{
position:absolute;top:70px;}
#readbookl,#travell{
position:absolute;left:120px;}
#readbook,#travel{
position:absolute;left:200px;}
#gyml,#eatl{position:absolute;
left:280px;}#gym,#eat{
position:absolute;left:360px;}
#pupill,#primaryl,#heightl,#compusl{width:60px;height:20px;}
#pupill,#pupil,#primaryl,#primary{position:absolute;top:50px;}
#heightl,#height,#compusl,#compus{position:absolute;top:70px;}
#pupill,#heightl{position:absolute;left:120px;}#pupil,#height{
position:absolute;left:200px;
}#primaryl,#compusl{
position:absolute;left:280px;}
#primary,#compus{
position:absolute;left:360px;}
#reset,#register1{
float:right;margin-left:60px;
margin-right:60px;width:60px;
height:30px;}
#reset:hover,#register1:hover{
background-color:#9FF;}.dsp{
display:block;}.con{
display:none;}
请填写你的信息
-请填写基本信息
姓 名:
密 码:
确认密码:
邮 箱:
电 话:
+请选择你的爱好
读 书
体 育
旅 游
吃食物
+请选择你的学业
小学生
中学生
高中生
大学生
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
