<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function validate(obj){
var s="";
//用戶名
var username=document.getElementById("username");
var reg1=/^([\u4e00-\u9fa5]|[a-zA-Z0-9]){1,15}$/i;
if(!reg1.test(username.value)){
alert("用戶名不合法！");
username.focus();
username.value="";
return false;
}
//密碼
var pwd=document.getElementById("pwd");
var reg2=/^([a-zA-Z0-9]){6,16}$/i;
if(!reg2.test(pwd.value)){
alert("密碼不合法！");
pwd.focus();
pwd.value="";
return false;
}
//確認密碼
var pwd2=document.getElementById("pwd2");
if(pwd2.value!=pwd.value){
alert("確認密碼不一致!");
pwd2.focus();
pwd2.value="";
return false;
}
//年齡
var age=document.getElementById("age");
if(isNaN(age.value)||(age.value<1||age.value>100)||age.value%1!=0){
alert("年齡不合法！");
age.focus();
age.value="";
return false;
}
//複選框興趣
var checkboxValue=new Array();
var str=document.getElementsByName("ist");
for(var i=0;i<str.length;i++){
if(str[i].checked){
checkboxValue.push(str[i].value);
}
}
if(checkboxValue.length==0){
alert("你的興趣至少選擇一項!");
return false;
}
//個人經歷
var note=document.getElementById("note");
if(note.value.length==0){
alert("你的個人經歷不能爲空!");
note.focus();
return false;
}
checkboxValue=checkboxValue.toString();
//手機號
var tel=document.getElementById("tel");
var reg3=/^1[34578]\d{9}$/;
if(!reg3.test(tel.value)){
alert("請輸入正確的手機號！");
tel.focus();
tel.value="";
return false;
}
//QQ
var QQ=document.getElementById("QQ");
var reg5=/\d{8,10}/;
if(!reg5.test(QQ.value)){
alert("請輸入正確的QQ號！");
QQ.focus();
QQ.value="";
return false;
}
//郵箱
var email=document.getElementById("email");
var reg4=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/;
if(!reg4.test(email.value)){
alert("請輸入正確的郵箱！");
email.focus();
email.value="";
return false;
}
//輸出
s=s+"用戶名: "+username.value+"\n";
s=s+"密碼: "+pwd.value+"\n";
s=s+"年齡: "+age.value+"\n";
s=s+"性別: "+document.getElementById("sex").value+"\n";
s=s+"出生日期: "+document.getElementById("date1").value+"\n";
s=s+"居住地: "+document.getElementById("home").value+"\n";
s=s+"興趣: "+checkboxValue+"\n";
s=s+"個人經歷: "+document.getElementById("note").value+"\n";
s=s+"手機號: "+tel.value+"\n";
s=s+"QQ: "+QQ.value+"\n";
s=s+"郵箱: "+email.value+"\n";
//最後輸出
alert(s);
}
//年齡判斷
function validateAge(obj){
if(isNaN(obj.value)){
obj.value=obj.value.replace(/\D/g,"");
}
}
//個人經歷判斷
function validateNote(){
var note=document.getElementById("note");
var msg=document.getElementById("noteMsg");
var len=note.value.length;
if(len<=50){
msg.innerHTML="還可以輸入"+"<font color='blue' size='3'>"+(50-len)+"</font>"+"個長度的數據。";
}
else{
msg.innerHTML="<font color='blue' size='3'>輸入的數據內容過大!</font>";
}
}
</script>
<style type="text/css">
body{font-size: 100%; font-family: arial;}
.message{color:red;}
#table1{border-collapse: collapse; margin-left:3px; margin-top: 30px;text-align: left; font-size: 0.9em;}
#table1 tr {border: 3px solid white;}
#fieldset1{width: 500px; height: 600px; margin-left: 440px; margin-top: 20px; background-color:white;background: PowderBlue;box-shadow: 10px 10px 5px #888888;}
#legend1{text-align: center; font-family:arial; font-size: 1.2em;}
span{font-size:0.7em; color: red; font-family: arial; letter-spacing: 1.1px;}
#table1 td{height: 30px;}
.t1{width:90px; text-align: right; padding-right: 10px;}
.t2{width:200px;}
.t3{width: 280px;}
input[type="button"]{
background: LimeGreen;
font-family:隸書;
font-size:17px;
color:white;
}
input[type="reset"]{
background: LimeGreen;
font-family:隸書;
font-size:17px;
color:white;
}
input[type="text"]{
background-color:HoneyDew;
height: 25px;width:200px;
border:3px solid LightCyan;
}
input[type="password"]{
background-color:HoneyDew;
height: 25px;width:200px;
border:3px solid LightCyan;
}
input[type="date"]{
background-color:HoneyDew;
height: 25px;width:200px;
border:3px solid LightCyan;
}
textarea{
background: HoneyDew;
border:3px solid LightCyan;
}
#home{
background-color:HoneyDew;
height: 27px;width:207px;
border:3px solid LightCyan;
}
</style>
</head>
<body>
<div id="">
<form method="post" name="form" action="">
<fieldset id="fieldset1">
<legend id="legend1">個人信息註冊表</legend>
<table id="table1">
<tr>
<td class="t1">用戶名</td>
<td class="t2"><input type="text" id="username" placeholder="請輸入用戶名" autofocus="autofocus" size=25/></td>
<td class="t3"><span>*用戶名的長度1~15位，包含任意的的字母、數字、中文，但不可以使用其他字符</span></td>
</tr>
<tr>
<td class="t1">密碼</td>
<td class="t2"><input type="password" name="pwd" id="pwd" placeholder="請輸入密碼" size=25></td>
<td class="t3"><span>*密碼的長度6~16位，包含任意的字母數字，不可以使用其它符號</span></td>
</tr>
<tr>
<td class="t1">確認密碼</td>
<td class="t2"><input type="password" name="pwd2" id="pwd2" placeholder="請再次輸入密碼" size=25></td>
<td class="t3"><span>*兩次密碼必須一致</span></td>
</tr>
<tr>
<td class="t1">年齡</td>
<td class="t2"><input type="text" name="age" id="age" onkeypress="validateAge(this)" placeholder="請輸入你的年齡" size=25/></td>
<td class="t3"><span>*年齡必須爲1~100之間的整數</span></td>
</tr>
<tr>
<td class="t1">性別</td>
<td class="t2" ><input type="radio" id="sex" name="sex" value="男" checked="checked"/>男
<input type="radio" id="sex" name="sex" value="女"/>女
</td>
<td></td>
</tr>
<tr>
<td class="t1">出生日期</td>
<td class="t2"><input type="date" id="date1"></td>
<td></td>
</tr>
<tr>
<td class="t1">居住地</td>
<td class="t2">
<select name="home" id="home">
<option value="濟南">濟南</option>
<option value="青島" selected="selected">青島</option>
<option value="聊城">聊城</option>
<option value="菏澤">菏澤</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td class="t1">你的興趣</td>
<td class="t2" >
<input type="checkbox" value="java" name="ist">java
<input type="checkbox" value="前端" name="ist">前端
<input type="checkbox" value="算法" name="ist">算法
<input type="checkbox" value="大數據" name="ist">大數據
</td>
<td class="t3"><span>*至少選擇一項</span></td>
</tr>
<tr>
<td class="t1">個人經歷</td>
<td class="t2"><textarea wrap="virtual" style="width:198px;height: 50px;" id="note" placeholder="在這裏輸入內容..."
onkeypress="validateNote()" onkeydown="validateNote()" required="required"></textarea></td>
<td class="t3"><span id="noteMsg">*字段長度不能爲空且不能超過50</span></td>
</tr>
<tr>
<td class="t1">電話</td>
<td class="t2"><input type="text" name="tel" id="tel" placeholder="請輸入你的手機號" size=25/></td>
<td class="t3"><span>*長度爲11位的大陸手機號</span></td>
</tr>
<tr>
<td class="t1">QQ</td>
<td class="t2"><input type="text" name="QQ" id="QQ" placeholder="請輸入你的QQ" size=25/></td>
<td class="t3"><span>*QQ的長度8~10位，必須爲數字</span></td>
</tr>
<tr>
<td class="t1">郵箱</td>
<td class="t2"><input type="text" name="email" id="email" placeholder="請輸入你的郵箱" size=25/></td>
<td class="t3"><span>*郵箱以com、cn、net、org結尾</span></td>
</tr>
<tr>
<td colspan="3" style="padding-left: 150px;"><input type="button" value="註冊" onclick="validate(form)"/>
<input type="reset" value="重置"/></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>