<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script type="text/javascript" defer="defer">
function checkuser(){//检查用户名的方法
var usernameNode=document.getElementById("username");//通过id得到input标签节点
var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串
var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符
var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较
if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式
if(ismacth){//输入的用户名不为空时
document.getElementById("username1").innerHTML="√";//正确时候输出√
document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色
}else{//输入的用户名不为空但是有不合法字符时
document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线";
document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色
}
}else{//输入的用户名为空时
document.getElementById("username1").innerHTML="请输入用户名";
document.getElementById("username1").setAttribute("class","cuotishi");
}
}
function checkpsd1(){//检查第一次输入密码的方法
var psdNode=document.getElementById("psd1");
var str1=psdNode.value;
if(str1.length == 0){//字符串的长度不等于0则判断字符串是否匹配正则表达式
//alert("请输入密码");
}
else if(str1.length < 6 ){
document.getElementById("password1").innerHTML="× 密码不能小于6位数";
document.getElementById("password1").setAttribute("class","cuotishi");
}
else if(str1.length >=6 ){
document.getElementById("password1").innerHTML="√";
document.getElementById("password1").setAttribute("class","duitishi");
}
}
function deletestr(){
document.getElementById("psd2").value="";//把里面的值赋值成空
document.getElementById("psd2").focus();//让标签获得焦点
}
function checkpsd2(){//检查第二次输入密码的方法
var psdNode=document.getElementById("psd2");
var str2=psdNode.value;
var psdNode=document.getElementById("psd1");
var str1=psdNode.value;
if(str2.length ==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式
//alert("请输入密码");
}else if(str2.length<6){
document.getElementById("passwordAgain").innerHTML="× 密码不能小于6位数";
document.getElementById("passwordAgain").setAttribute("class","cuotishi");
}else if(str2.length>=6){
if(str1 != str2){//比较第二次输入的密码和第一次输入的密码是否相同
document.getElementById("passwordAgain").innerHTML="× 密码不一致，重新输入";
document.getElementById("passwordAgain").setAttribute("class","cuotishi");
deletestr();
}else{//两次密码相同的时候
document.getElementById("passwordAgain").innerHTML="√";
document.getElementById("passwordAgain").setAttribute("class","duitishi");
}
}
}
function checkmail(){//检查邮箱输入的方法
var usernameNode=document.getElementById("email");
var str=usernameNode.value;
var regExp = new RegExp("^\\w+@\\w+\\.(([a-zA-Z]{2}|[a-zA-Z]{3})|(([a-zA-Z]{2}|[a-zA-Z]{3})\\.([a-zA-Z]{2}|[a-zA-Z]{3})))$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符
var ismacth=regExp.test(str);
if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式
if(ismacth){
document.getElementById("emailinput").innerHTML="√";
document.getElementById("emailinput").setAttribute("class","duitishi");
}else{
document.getElementById("emailinput").innerHTML="× 请输入正确的邮箱";
document.getElementById("emailinput").setAttribute("class","cuotishi");
}
}
}
var time=60;//这里控制多少时间就可以点击提交按钮
function submitok(){
var subNode=document.getElementsByName("s")[0];
var attr = subNode.attributes;
var str="请阅读服务条款"+"("+(time--)+"s)"
attr.getNamedItem("value").nodeValue=str;
if(time>-2){//当时间显示大于0s的时候，调用自己，递归
setTimeout("submitok()",1000);
}
if(time==-2){//当时间显示0s的时候
attr.getNamedItem("value").nodeValue="提交";//把按钮中间的文字改变成提交
document.getElementById("tiaokuan").disabled=false; //disabled=false按钮可以点击状态 disabled=true按钮不可点击状态
}
}
onload = submitok;//当页面代码全部加载完毕的时候，调用submitok去限制按钮提交的时间
</script>
<style type="text/css">
.cuotishi{
float: left;
color: red;
}
.duitishi{
float: left;
color: green;
}
</style>
</head>
<body>
<form action="" method="get"> <!-- action="" 双引号里面填入你要提交到的服务器地址 -->
<table border="2" >
<tr >
<td ><label for="username">登陆名：</td > <td width="380px"><div style="float: left;"><input type="text" id="username" name="username" style="width:140px" onblur="checkuser();"/></div><div id="username1" >(可包含a~z，0~9和下划线)</div></td> <td align="top"><img src="images/read.gif"/>请仔细阅读本协议</td>
</tr>
<tr>
<td >密码：</td> <td ><div style="float: left;"><input type="password" style="width:140px" id="psd1" name="psd1" onblur="checkpsd1();"/></div><div id="password1">(至少包含6个字符)</div></td> <td rowspan="8"><textarea cols="20" rows="14" >欢迎阅读服务条款协议。。。欢迎阅读服务条款协议。。。欢迎阅读服务条款协议。。。</textarea></td>
</tr>
<tr>
<td>再次输入密码：</td> <td><div style="float: left;"><input type="password" style="width:140px" id="psd2" name="psd2" onblur="checkpsd2();"/></div><div id="passwordAgain" ></div></td>
</tr>
<tr>
<td>电子邮箱：</td> <td ><div style="float: left;"><input type="text" style="width:140px" id="email" name="email" onblur="checkmail();"/></div><div id="emailinput">例如：abc123@qq.com.cn</div></td>
</tr>
<tr>
<td>性别：</td> <td><input type="radio" name="sex" value="m"/><img src="images/m.gif" />男<input type="radio" name="sex" value="w"/><img src="images/w.gif" />女</td>
</tr>
<tr>
<td>头像：</td> <td><input type="file" name="headimg" /></td>
</tr>
<tr>
<td>爱好：</td> <td><input type="checkbox" name="love" value="sport"/>运动<input type="checkbox" name="love" value="chat" />聊天<input type="checkbox" name="love" value="game"/>玩游戏</td>
</tr>
<tr>
<td>喜欢的城市：</td>
<td>
<select name="多选框" size="1">
<option value="0">请选择</option>
<option value="nn">南宁</option>
<option value="bj">北京</option>
</select>
</td>
</tr>
<tr>
<td></td> <td><input type="submit" value="请阅读服务条款" id="tiaokuan" name="s" disabled="disabled" /> <input type="reset" value="重填"/></td>
</tr>
</table>
</form>
</body>
</html>
