註冊界面
要求：用戶名只能是字母或者數字或者下劃線，不能以數字開頭，用戶名長度在6到20之間
密碼兩次驗證必須一致，用戶名密碼不能爲空。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>模擬註冊</title>
<style type="text/css">
*{margin:0;
padding:0;
font-size:14px;
font-famliy:"微軟雅黑";
font-style:normal; }
body{background:#FBFBFB;}
.container{
border:solid 1px #F1F1F1;
width:600px;
height:600px;
background:#fff;
margin:20px auto;
padding-bottom:10px;
}
.container h1{
font-size:22px;
font-family:微軟雅黑;
text-align:center;
color:#333;
display:block;
margin:20px;
border:0px solid gray;
}
.div1{
margin-left:55px;
}
#Name,#Pwd1,#Pwd2,#telphone{
color:gray;
height:25px;
width:200px;
font-size:10px;
padding-left:10px;
margin-top:10px;
}
#btn1,#btn2{
height:25px;
width:60px;
display:block;
float:left;
margin-left:70px;
margin-top:20px;
}
#sex1,#sex2{
margin-left:10px;
margin-top:20px;
line-height:30px;
width:13px;
border:1px solid gray;
}
#phone1{
width:45px;
}
#phone2{
width:80px;
}
#phone3{
width:45px;
}
#phone1,#phone2,#phone3{
color:gray;
height:25px;
font-size:10px;
padding-left:5px;
margin-top:10px;
}
#hobby1,#hobby2,#hobby3,#hobby4,#hobby5,#hobby6{
color:gray;
height:25px;
line-height:30px;
font-size:10px;
width:13px;
vertical-align:middle;
margin-left:5px;
margin-top:10px;
}
#lname,#ltelphone,#lphone,#lpass1,#lpass2{
color:#FF0000;
font-size:10px;
}
</style>
<script>
window.οnlοad= function(){
var userName = document.getElementById("Name");
var lableName = document.getElementById("lname");
var password1 = document.getElementById("Pwd1");
var password2 = document.getElementById("Pwd2");
var labelPassword1 = document.getElementById("lpass1");
var labelPassword2 = document.getElementById("lpass2");
var telphone = document.getElementById("telphone");
var labelTelphone = document.getElementById("ltelphone");
var phone1 = document.getElementById("phone1");
var phone2 = document.getElementById("phone2");
var phone3 = document.getElementById("phone3");
var labelPhone = document.getElementById("lphone");
userName.onblur = function(){
var nameValue = userName.value;
var pattern = /^[a-zA-Z_]\w{5,19}$/g;
if(nameValue =="" || nameValue==null){
lableName.innerHTML = "用戶名不能爲空!";
}
else if(pattern.test(nameValue)){
lableName.innerHTML = "正確!";
}
else{
lableName.innerHTML = "數字不能開頭,長度在6-20位之間！";
}
}
password1.onblur = function(){
var passValue = password1.value;
var pattern = /^\w{6,15}$/g;
if(pattern.test(passValue)){
labelPassword1.innerHTML = "正確!";
}
else if(passValue =="" || passValue==null){
labelPassword1.innerHTML = "密碼不能爲空!";
}
else{
labelPassword1.innerHTML = "密碼長度在6-15位之間！";
}
}
password2.onblur = function(){
var pass1Value = password1.value;
var pass2Value = password2.value;
if(pass2Value =="" || pass2Value==null){
labelPassword2.innerHTML = "密碼不能爲空!";
}
else if(pass1Value == pass2Value){
labelPassword2.innerHTML = "輸入正確!";
}
else if(pass1Value!=pass2Value){
labelPassword2.innerHTML = "兩次密碼輸入不一致!";
}
else{
labelPassword2.innerHTML = "密碼長度在6-15位之間！";
}
}
telphone.onblur = function(){
var telValue = telphone.value;
var pattern = /^1(83|52|38|)\d{8}$/g;
if(pattern.test(telValue)){
labelTelphone.innerHTML = "正確!";
}
else if(telValue =="" || telValue==null){
labelTelphone.innerHTML = "手機號碼不能爲空!";
}
else{
labelTelphone.innerHTML = "長度必須11位！";
}
}
phone1.onblur = function(){
var phone1Value = phone1.value;
var pattern = /^\d{3,4}$/g;
if(pattern.test(phone1Value)){
labelPhone.innerHTML = "區號正確!";
}
else if(phone1Value =="" || phone1Value==null){
labelPhone.innerHTML = "區號不能爲空!";
}
else{
labelPhone.innerHTML = "區號必須3-4位！";
}
}
phone2.onblur = function(){
var phone2Value = phone2.value;
var pattern = /^\d{7,8}$/g;
if(pattern.test(phone2Value)){
labelPhone.innerHTML = "號碼正確!";
}
else if(phone2Value == "" || phone2Value == null){
labelPhone.innerHTML = "號碼不能爲空!";
}
else{
labelPhone.innerHTML = "號碼必須7-8位！";
}
}
phone3.onblur = function(){
var phone3Value = phone3.value;
var pattern = /^(\d{1,4})?$/g;
if(pattern.test(phone3Value)){
labelPhone.innerHTML = "正確!";
}
else{
labelPhone.innerHTML = "錯誤！";
}
}
}
</script>
</head>
<body>
<div class="container">
<h1>註冊</h1>
<div class="div1">
用戶名： <input type = "text" placeholder = "輸入用戶名" id = "Name"/>
<label id="lname"></label><br/>
密碼： <input type = "text" placeholder = "輸入密碼" id = "Pwd1"/>
<label id="lpass1"></label><br/>
確認密碼：<input type = "text" placeholder = "再次輸入密碼" id = "Pwd2"/>
<label id="lpass2"></label><br/>
性別：<input type="radio" name="sex" id="sex1"/> 男
<input type="radio" name="sex" id="sex2"/> 女<br/>
手機號碼：<input type="text" placeholder="手機號" id="telphone"/>
<label id="ltelphone"></label><br/>
固定電話：<input type="text" id="phone1"/>-<input type="text" id="phone2"/>-<input type="text" id="phone3"/>
<label id="lphone"></label><br/>
興趣愛好:<input type="checkbox" id="hobby1"/>全選<input type="checkbox" id="hobby2"/>音樂<input type="checkbox" id="hobby3"/>美術<input type="checkbox" id="hobby4"/>運動<input type="checkbox" id="hobby5"/>讀書<input type="checkbox" id="hobby6"/>編程<br/>
<input type="button" value="註冊" id="btn1"/>
<input type="reset" value="重置" id="btn2"/>
</div>
</div>
</body>
</html>