1. 程式人生 > >使用者註冊的form表單(加校驗)

使用者註冊的form表單(加校驗)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>註冊頁面</title>
</head>

<script type="text/javascript">
	//表單的校驗
	function checkForm(){
		//使用者名稱不能為空
		var username = document.form1.username.value;
		if(username.trim() == ""){
			alert("使用者名稱不能為空");
			return false;
		}
		//密碼格式
		var password = document.form1.password.value;
		if(password.trim()==""||password.length < 6){
			alert("密碼不能少於6位");
			return false;
		}
		//兩次密碼要一致
		var repassword = document.form1.repassword.value;
		if(password != repassword){
			alert("兩次密碼不一致");
			return false;
		}
		//暱稱不能為空
		var nickname = document.form1.nickname.value;
		if(nickname.trim() == ""){
			alert("暱稱不能為空");
			return false;
		}
		//郵箱格式
		var email = document.form1.email.value;
		if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email)){
			alert("郵箱格式不正確");
			return false;
		}
	}
	
</script>
<body>
	<h4>使用者註冊頁面</h4>
	<font color="red">${ requestScope.msg }</font>
	<form name="form1" action="${ pageContext.request.contextPath }/reguser" method="post" onsubmit="return checkForm()">
		<table border="1" width="50%" cellpadding="10">
			<tr>
				<td>使用者名稱</td>
				<td>
					<input type="text" name="username"/>
				</td>
			</tr>
			<tr>
				<td>密碼</td>
				<td>
					<input type="password" name="password">
				</td>
			</tr>
			<tr>
				<td>確認密碼</td>
				<td>
					<input type="password" name="repassword">
				</td>
			</tr>
			<tr>
				<td>暱稱</td>
				<td>
					<input type="text" name="nickname">
				</td>
			</tr>
			<tr>
				<td>郵箱</td>
				<td>
					<input type="text" name="email">
				</td>
			</tr>
			<tr>
				<td>驗證碼</td>
				<td>
					<input type="password" name="checkcode"><img src="">
				</td>
			</tr>
			<tr >
				<td align="center">
					<input type="submit" value="註冊">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>