花了五六个小时边学边写了一个注册页面，仿照google邮箱注册的样子，刚开始，看了下google注册页面的原码，当时就不够淡定了，总计有六千多行代码，当时就有点晕了。在心里告诉自己：如果这次放弃，以后都会放弃的，那样的话就彻底会远离IT行业。
嗯！对。总有第一次，总要开始，不管面对什么技术，不要逃避，因为迎头上始终是最好的克服恐惧的方法。
终于，到了昨天晚上就搞的差不多了，过程中，各种google，百度啥的。当然写的很低水平的那种，还望大牛不要嘲笑哈！
下面分享下我写的代码：
首先是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>google账户注册</title>
<script src="GOOGLE注册脚本.js"></script>
<LINK rel = "stylesheet" type = "text/css" href = "样式表.css" >
</head>
<body background="背景.jpg" onload="function()">
<img align="top" src="google2.jpg" width=100% height="200"/>
<marquee direction=left scrolldelay=100 behavior=alternate scrollamount=10 loop=100 bgcolor=blue hspace=0 vspace=1>欢迎注册google邮箱</marquee>
<div id="column1">
<h2 align="center">注册信息填写</h2>
<form action="" method="post" name="register" >
<p align="left">
<label>姓名</label>
<br />
<input type="text" name="text1" align="left" value="姓氏" maxlength="10" class="myinput" onFocus="myfun1()" onblur="myfun3()"/>
<input type="text" name="text2" align="left" value="姓名" maxlength="10" class="myinput" onFocus="myfun2()" onblur="myfun4()"/>
<br />
<label>用户名</label>
<br />
<input name="text3" type="text" maxlength="20" onblur="myfun5()"/>
<label>@gmail.com</label>
<br />
<label>设置密码</label>
<br />
<input name="text4" type="password" maxlength="20" onblur="myfun6()" />
<br />
<label>确认密码</label>
<br />
<input name="text5" type="password" maxlength="20" onblur="myfun7()"/>
<br />
<label>生日</label>
<br />
<select name=YYYY onchange="YYYYMM(this.value)">
<option value="">--请选择出生年份--</option>
</select>
<select name=MM onchange="MMDD(this.value)">
<option value="">--请选择出生月份--</option>
</select>
<select name=DD>
<option value="">--请选择出生日期--</option>
</select>
<br />
<label>性别</label>
<br />
<input name="myradio" type="radio" value="男" />男
<input name="myradio" type="radio" value="女" />女
<br />
<label>手机</label>
<br />
<input name="text6" type="text" maxlength="11" onblur="myfun8()"/>
<br />
<label>当前邮件地址</label>
<br />
<input name="text7" type="text" maxlength="20" onblur="myfun9()"/>
<br />
<label>位置</label>
<br />
<select id="s1" onchange="check_city()">
<option selected="selected">四川</option>
<option>安徽</option>
<option>浙江</option></select>
<select id="s2" onchange="check_town()">
<option selected="selected">成都</option>
<option>绵阳</option>
</select>
<select id="s3">
<option selected="selected">高新区</option>
<option>金牛区</option></select>
<p align="left">
<input name="submit" type="submit" value="注册" onclick="myfun10()"/>
<input name="reset" type="reset" value="重置" />
</form>
</div >
<div id="column2">
<img src="2.jpg" align="top" width="100%" height="200"/>
<h1>随时随地使用。</h1>
Google 帐户可让您在任何设备上访问自己的所有资料（Gmail、照片等）。您可以通过拍照方式或语音方式进行搜索，还可以获得免费的转弯语音导航功能，自动上传照片，而且不久之后还可通过手机用 Google 电子钱包进行购物。
<p>
<img src="1.jpg" align="top" width="100%" height="200"/>
<h1>您的 Google 帐户不只是能用于Gmail哦！</h1>
您还可以通过自己的 Google 帐户进行交谈、聊天、分享、安排日程、存储、整理、协作、查找信息以及创建内容。您只需一组用户名和密码，就可以使用 Google 的各种产品（包括 Gmail、Google+、Youtube 等），还可以查看自己的搜索记录；系统会随时对所有信息进行备份，您可以通过 Google.com（已经猜到了吧）轻松查找。
</p>
</div>
<div id="column3">
<img src="3.jpg" align="top" width="100%" height="200"/>
<h1>分享多少，自己决定。</h1>
在 Google+ 上有选择地和您的朋友、家人（甚至老板）分享各种内容。和朋友进行环聊、群发消息或者仅关注您感兴趣的人的帖子。一切由您决定。
<p>
<img src="4.jpg" align="top" width="100%" height="200"/>
<h1>提前享用未来的工作方式。</h1>
工作方式随即跃入新时代，一切更出色。即使身在千里之外，也能实时看到同事或合作伙伴上传照片、更新电子表格或润色文章段落。只要注册 Google 帐户，还能免费获得"Google 文档"哦。
</p>
</div>
</body>
</html>
然后是javascript：
// JavaScript Documentlse
function change1()
{
var p = document.register.location.selectionIndex;
}
function myfun1()
{
if (document.register.text1.value=="姓氏")
document.register.text1.value="" ;
}
function myfun2()
{
if (document.register.text2.value=="姓名")
document.register.text2.value="" ;
}
/*验证姓氏，只有中文的正则表达式*/
function myfun3()
{
var e=/^[\u4e00-\u9fa5]/;
var obj=document.register.text1.value;
if(obj=="")
{
alert("请输入姓氏");
}
else if(!e.exec(obj))
{
alert("所输入的姓氏不是汉字");
document.register.text1.value="";
}
}
/*验证姓名，只有中文的正则表达式*/
function myfun4()
{
var e=/^[\u4e00-\u9fa5]/;
var obj=document.register.text2.value;
if(obj=="")
{
alert("请输入姓名");
}
else if(!e.exec(obj))
{
alert("所输入的姓名不是汉字");
document.register.text2.value="";
}
}
/*验证邮箱，只有字母、数字和下划线且不能以下划线开头和结尾的正则表达式*/
function myfun5()
{
var e=/^(?!_)(?!.*?_$)[a-zA-Z0-9_]+$/;
var obj=document.register.text3.value;
if(obj=="")
{
alert("请输入用户名");
}
else if(!e.exec(obj))
{
alert("所输入的内容不符合要求");
document.register.text3.value="";
}
}
/*验证密码，只有字母和数字的正则表达式*/
function myfun6()
{
var e=/^[a-zA-Z0-9_]+$/;
var obj=document.register.text4.value;
if(obj=="")
{
alert("请输入密码");
}
else if(!e.exec(obj))
{
alert("所输入的内容不符合要求");
document.register.text4.value="";
}
}
/*验证密码是否匹配*/
function myfun7()
{
var e=/^[a-zA-Z0-9_]+$/;
var obj1=document.register.text4.value;
var obj2=document.register.text5.value;
if(obj2=="")
{
alert("请再次输入密码");
}
else if(obj1!=obj2)
{
alert("两次密码不匹配");
}
}
/*验证手机号码，全是数字的正则表达式*/
function myfun8()
{
var e=/^\d{11}$/;
var obj=document.register.text6.value;
if(obj=="")
{
alert("请输入手机");
}
else if(!e.exec(obj))
{
alert("请输入有效的手机号码");
}
}
function myfun9()
{
var e=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
var obj=document.register.text7.value;
if(obj=="")
{
alert("请输入邮件地址");
}
else if(!e.exec(obj))
{
alert("请输入有效的邮件地址");
}
}
function myfun10()
{
var obj1=document.register.text1.value;
var obj2=document.register.text2.value;
var obj3=document.register.text3.value;
var obj4=document.register.text4.value;
var obj5=document.register.text6.value;
var obj6=document.register.text7.value;
var objSex="先生";
if ((document.register.myradio[0].checked==false)&&(document.register.myradio[1].checked==false))
{
alert("请选择性别！");
return false;
}
if(obj1=="姓氏")
{
alert("请输入姓氏");
return false;
}
if(obj2=="姓名")
{
alert("请输入姓名");
return false;
}
if(obj3=="")
{
alert("请输入用户名");
return false;
}
if(obj4=="")
{
alert("请输入密码");
return false;
}
if(obj5=="")
{
alert("请输入手机号码");
return false;
}
if(obj6=="")
{
alert("请输入邮件地址");
return false;
}
if(document.register.myradio[0].checked==false)
objSex = "女士";
var message = objSex+"! 恭喜您！注册成功！ ";
message+="你的姓名是:"+obj1+obj2+" 您注册的邮箱地址是: "+obj3+"@gmail.com";
alert(message);
}
function check_city()
{
var obj1=document.getElementById("s1");
var obj2=document.getElementById("s2");
var obj3=document.getElementById("s3");
obj2.options.length=0;
obj3.options.length=0;
if(obj1.selectedIndex==0)
{
obj2.options.add(new Option("成都","1"));
obj2.options.add(new Option("绵阳","2"));
obj3.options.add(new Option("高新区","1"));
obj3.options.add(new Option("金牛区","2"));
}
else if(obj1.selectedIndex==1)
{
obj2.options.add(new Option("合肥","1"));
obj2.options.add(new Option("六安","2"));
obj3.options.add(new Option("瑶海区","1"));
obj3.options.add(new Option("包河区","2"));
}
else if(obj1.selectedIndex==2)
{
obj2.options.add(new Option("杭州","1"));
obj2.options.add(new Option("宁波","2"));
obj2.options.add(new Option("温州","3"));
obj2.options.add(new Option("台州","4"));
obj3.options.add(new Option("萧山","1"));
obj3.options.add(new Option("富阳","2"));
obj3.options.add(new Option("余杭","3"));
obj3.options.add(new Option("淳安","4"));
}
}
function check_town()
{
var obj2=document.getElementById("s2");
var obj3=document.getElementById("s3");
obj3.options.length=0;
if(obj2.options[obj2.selectedIndex].innerHTML=="成都")
{
obj3.options.add(new Option("高兴区","1"));
obj3.options.add(new Option("金牛区","2"));
}
else if(obj2.options[obj2.selectedIndex].innerHTML=="自贡")
{
obj3.options.add(new Option("大安区","1"));
obj3.options.add(new Option("贡井区","2"));
}
else if(obj2.options[obj2.selectedIndex].innerHTML=="合肥")
{
obj3.options.add(new Option("瑶海区","1"));
obj3.options.add(new Option("包河区","2"));
}
else if(obj2.options[obj2.selectedIndex].innerHTML=="六安")
{
obj3.options.add(new Option("芜湖","1"));
obj3.options.add(new Option("池州","2"));
}
else if(obj2.options[obj2.selectedIndex].innerHTML=="杭州")
{
obj3.options.add(new Option("萧山","1"));
obj3.options.add(new Option("富阳","2"));
obj3.options.add(new Option("余杭","3"));
obj3.options.add(new Option("淳安","4"));
}
else if(obj2.options[obj2.selectedIndex].innerHTML=="宁波")
{
obj3.options.add(new Option("慈溪","1"));
obj3.options.add(new Option("四兴","2"));
}
}
window.onload = function(){
strYYYY = document.register.YYYY.outerHTML;
strMM = document.register.MM.outerHTML;
strDD = document.register.DD.outerHTML;
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先给年下拉框赋内容
var y = new Date().getFullYear();
var str = strYYYY.substring(0, strYYYY.length - 9);
for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年
{
str += "<option value='" + i + "'> " + i + "</option>\r\n";
}
document.register.YYYY.outerHTML = str +"</select>";
//赋月份的下拉框
var str = strMM.substring(0, strMM.length - 9);
for (var i = 1; i < 13; i++)
{
str += "<option value='" + i + "'> " + i + "</option>\r\n";
}
document.register.MM.outerHTML = str +"</select>";
document.register.YYYY.value = y;
document.register.MM.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
writeDay(n); //赋日期下拉框
document.register.DD.value = new Date().getDate();
}
function YYYYMM(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = document.register.MM.options[document.register.MM.selectedIndex].value;
if (MMvalue == ""){DD.outerHTML = strDD; return;}
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n)
}
function MMDD(str) //月发生变化时日期联动
{
var YYYYvalue = document.register.YYYY.options[document.register.YYYY.selectedIndex].value;
if (str == ""){DD.outerHTML = strDD; return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n)
}
function writeDay(n) //据条件写日期的下拉框
{
var s = strDD.substring(0, strDD.length - 9);
for (var i=1; i<(n+1); i++)
s += "<option value='" + i + "'> " + i + "</option>\r\n";
document.register.DD.outerHTML = s +"</select>";
}
function IsPinYear(year)//判断是否闰平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0))}
/*
验证数字的正则表达式集
验证数字：^[0-9]*$
验证n位的数字：^\d{n}$
验证至少n位数字：^\d{n,}$
验证m-n位的数字：^\d{m,n}$
验证零和非零开头的数字：^(0|[1-9][0-9]*)$
验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数：^\+?[1-9][0-9]*$
验证非零的负整数：^\-[1-9][0-9]*$
验证非负整数（正整数 + 0） ^\d+$
验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
验证长度为3的字符：^.{3}$
验证由26个英文字母组成的字符串：^[A-Za-z]+$
验证由26个大写英文字母组成的字符串：^[A-Z]+$
验证由26个小写英文字母组成的字符串：^[a-z]+$
验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串：^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+
验证汉字：^[\u4e00-\u9fa5],{0,}$
验证Email地址：^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$ \w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*
验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$
验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为："01"-"09"和"1""12"
验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。
整数：^-?\d+$
非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?
*/
接着是CSS：
@charset "utf-8";
/* CSS Document */
.myinput
{
border: 1px solid;
border-color:#D4BFFF;
color:#339
}
body,select
{
font-size:9pt;
font-family:Verdana;
}
a
{
color:red;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1
{
font-family:"MS Serif", "New York", serif;
font-style:normal;
font-weight:300;
color:#06C;
}
h2
{
font-family:"MS Serif", "New York", serif;
font-weight:500;
color:#00F;
}
#column1
{ float:left; width: 33%; }
#column2
{ float:left; width: 33%; }
#column3
{ float:left; width: 33%; }
最后还剩下些资源（图片啥的），要的话可以到下面的地址出下载哈！
http://download.csdn.net/detail/ergouge/4431547