HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單注冊與驗證</title>
<script language="javascript" type="text/javascript" src="JS/index.js"></script>
</head>
<body>
<form name="form1" id="form1" method="post"action="">
<table border=1 align=center width=350>
<tr align="middle">
<th colSpan="2"height="24">新用戶注冊</th>
</tr>
<tr>
<td with="40%">
<b>用 戶 名</b>:
</td>
<td width="60%">
<input type="text" name="uid" maxlength="10"size=30 />
</td>
</tr>
<tr>
<td><b>性 別</b>:</td>
<td>
<input type="radio" value="boy" name="gender"checked>男
<input type="radio" value="girl" name="gender">女
</td>
</tr>
<tr>
<td><b>密 碼</b>:</td>
<td><input type="password"name="psw1"size=32></td>
</tr>
<tr>
<td><b>確認密碼</b>:</td>
<td><input type="password"name="psw2"size=32></td>
</tr>
<tr>
<td><b>密碼問題</b>:</td>
<td><input type="text"name="question"size=30></td>
</tr>
<tr>
<td><b>問題答案</b>:</td>
<td><input type="text"name="answer"size=30></td>
</tr>
<tr>
<td><b>Email</b>:</td>
<td><input type="text"name="email"maxlength=50 size=30></td>
</tr>
<tr>
<td><b>聯系電話</b>:</td>
<td><input type="text"name="tel"maxlength=50 size=30></td>
</tr>
<tr>
<td><b>職 業</b>:</td>
<td>
<select name="career" class="input1">
<option value="student"selectd>學生</option>
<option value="worker">工人</option>
<option value="teacher">老師</option>
<option value="farmer">農民</option>
<option value="business">商人</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="Submit"value="注冊"onclick="return check();" />
<input type="reset" name="Submit2"value="清除" />
</td>
</tr>
</table>
</form>
</body>
</html>
JS文件
function check(){ /* *驗證用戶名、密碼、確認密碼是否為空等 */ fr=document.form1; if(fr.uid.value=="")//用戶名不能為空 { alert("用戶名ID必須要填寫!"); fr.uid.focus(); return false; } if((fr.psw1.value!="")||(fr.psw2.value!="")){//兩次輸入密碼必須一致 if(fr.psw1.value!=fr.psw2.value){ alert("密碼不一致，請重新輸入並驗證密碼!"); fr.psw1.focus(); return false; } }else{ alert("密碼不能為空!"); fr.psw1.focus(); return false; } if(fr.gender.value=="")//性別必須填寫 { alert("性別必須填寫"); fr.name.focus(); return false; } fr.submit(); /* *電子郵件地址驗證 */ if(fr.email.value!="")//驗證Email格式 { if(!isEmail(fr.email.value)){ alert("輸入正確的郵件名稱!"); fr.email.focus(); return false; } } function isEmail(theStr){ var atindex=theStr.indexOf('@'); var dotindex=theStr.indexOf('.',atindex); var flag=true; thesub=theStr.substring(0,dotindex+1); if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2) ||(theStr.length<=thesub.length)){ flag=false; }else{ flag=true; } return(flag); } }
運行效果
