HTML5+Javascript表單註冊和驗證練習
阿新 • • 發佈:2018-12-09
//html5.html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單註冊和驗證</title>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<form name="form1" id="form1" method="post" action="reg2.jsp">
<table border="1" align="center" width="350">
<tr align="middle"><th colSpan=2 height=24>新使用者註冊</th></tr>
<tr>
<td width="40%">
<b>用 戶 名</b></td>
<td width="60%"> <input type="text" name="uid" size="30" maxlength="10"></td>
</tr>
<tr>
<td><b>性 別</b>:</td>
<td>
<input type="radio" checked="CHECKED" name ="gender" value="boy" >男孩
<input type="radio" name="gender" value="girl">女孩
</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="question" name="text" 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" size="30" maxlength="50"></td>
</tr>
<tr>
<td><B>聯絡電話</B></td>
<td><input type=" text" name="tel" size="30" maxlength="50"></td>
</tr>
<tr>
<td><b>職 業</b>:</td>
<td> <select name="career" class="input1">
<option value="student" selected="selected">學生</option>
<option value="teacher">老師</option>
<option value="worker">工人</option>
<option value="famer">農民</option>
<option value="business">商人</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="註冊" name=submit onclick="return check()">
<input type="reset" value="清除" name=submit2></option>
</td>
</tr>
</table>
</form>
</body>
</html>
//hello.js
function showEnter(){
alert("尊敬的客戶,歡迎您光臨本店");
}
function showLeave(){
alert("歡迎下次光臨!");
}
//頁面載入事件時呼叫函式
window.onload = showEnter;
//頁面關閉事件觸發時呼叫函式
window.onbeforeunload = showLeave;
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);
}
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;
}
if(fr.email.value != "")
{
if(!isEmail(fr.email.value))
{
alert("請輸入正確的郵件名稱");
fr.email.focus();
return false;
}
}
fr.submit();
}