<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script language="javascript" >
function check(){
//1.檢測用戶名
var username=trim(document.getElementById("us").value);
if(username.length<6 || username.length>15){
alert("你輸入的用戶名有誤，用戶名必須是有6到15爲有效字符組成");
document.getElementById("us").focus();
document.getElementById("us").select();
return false;
}
//2.對用戶密碼進行驗證
var pw1=document.getElementById("pw1").value;
var pw2=document.getElementById("pw2").value;
if(pw1.length!=6){
alert("你輸入的密碼必須爲6位有效字符");
return false;
}
if(pw1!=pw2){
alert("你輸入輸入的兩次密碼必須保持一致");
return false;
}
//3.對單選按鈕的限制，要求用戶必須選擇一個性別
var sexs=document.getElementsByName("sex");
var flag=false;
for(var i=0;i<sexs.length;i++){
if(sexs[i].checked){
flag=true;
break;
}
}
if(!flag){
alert("請至少選擇一個性別");
}
//4.對複選框的限制
var ins=document.getElementsByName("in");
var flag=false;
for(var i=0;i<sexs.length;i++){
if(ins[i].checked){
flag=true;
break;
}
}
if(!flag){
alert("請至少選擇一個興趣愛好");
}
//5.對用戶所在城市進行限制
var area=document.getElementById("area").value;
if(area==""){
alert("請選擇所在地區");
document.getElementById("area").focus();
return false;
}
//document.getElementById("area").options; //option組成的數組
// alert(document.getElementById("desc").value.length);
//6.對文本域的限制
var text=document.getElementById("text").value;
//alert(text);
if(text.length<4){
alert("請輸入內容")
return false;
}
return false;
}
function trim(s){
s=s.replace(/^\s+/,""); //以非空字符開頭
s=s.replace(/\s+$/,"");//以非空字符結束
return s
}
</script>
</head>
<body>
<form action="?" method="post" οnsubmit="return check()" >
<table border="1" cellspacing="0" bordercolor="#0000FF" width = "80%" align="center" height="60%">
<tr>
<td>用戶名</td>
<td><input type="text" name="username" id="us"> </td>
<td>文本框</td>
</tr>
<tr>
<td>密碼</td>
<td><input type="password" name="password" id="pw1" > </td>
<td>密碼文本框</td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type="password" name="password" id="pw2" > </td>
<td>密碼文本框</td>
</tr>
<tr>
<td>性別</td>
<td><input type="radio" name="sex" >男 <input type="radio" name="sex" >女 </td>
<td>單選按鈕</td>
</tr>
<td>愛好</td>
<td><input type="checkbox" name="in" >籃球 <input type="checkbox" name="in" >上網
<input type="checkbox" name="in" >玩 <input type="checkbox" name="in" >交友聊天
<input type="checkbox" name="in" >旅遊</td>
<td>複選框</td>
</tr>
<tr>
<td>來自城市</td>
<td>
<select name="area" id="area">
<option value="">請選擇城市</option>
<option value="hg">黃岡</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">廣州</option>
</select></td>
<td>下拉列表</td>
</tr>
<td>上傳照片</td>
<td><input type="file" name="upload" > </td>
<td>上傳文件框</td>
</tr>
<td>自我介紹</td>
<td>
<textarea cols="34" rows="5" name="text" id="text"></textarea>
</td>
<td>文本域</td>
</tr>
<tr>
<td>按鈕</td>
<td><input type="submit" name="submit" value="提交" > <input type="submit" name="reset" value="重置" > </td>
<td>按鈕框</td>
</tr>
</table>
</form >
</body>
</html>