1. 程式人生 > >js驗證表單提交

js驗證表單提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>別人的註冊頁面,參考</title>
		<script>
			function checkForm(){
				//alert("aa");
				/**校驗使用者名稱*/
				//1.獲取使用者輸入的資料
				var uValue = document.getElementById("user").value;
				//alert(uValue);
				if(uValue==""){
					//2.給出錯誤提示資訊
					alert("使用者名稱不能為空!");
					return false;
				}
				
				/*校驗密碼*/
				var pValue = document.getElementById("password").value;
				if(pValue==""){
					alert("密碼不能為空!");
					return false;
				}
				
				/**校驗確認密碼*/
				var rpValue = document.getElementById("repassword").value;
				if(rpValue!=pValue){
					alert("兩次密碼輸入不一致!");
					return false;
				}
				
				/*校驗郵箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])
[email protected]
([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("郵箱格式不正確!"); return false; } } </script> </head> <body> <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px"> <!--1.logo部分--> <tr> <td> <!--巢狀一個一行三列的表格--> <table border="1px" width="100%"> <tr height="50px"> <td width="33.3%"> <img src="../img/logo2.png" height="47px" /> </td> <td width="33.3%"> <img src="../img/header.png" height="47px" /> </td> <td width="33.3%"> <a href="#">登入</a> <a href="#">註冊</a> <a href="#">購物車</a> </td> </tr> </table> </td> </tr> <!--2.導航欄部分--> <tr height="50px"> <td bgcolor="black"> &nbsp;&nbsp;&nbsp;&nbsp; <a href="#"> <font size="5" color="white">首頁</font> </a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="#"> <font color="white">手機數碼</font> </a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#"> <font color="white">電腦辦公</font> </a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#"> <font color="white">鞋靴箱包</font> </a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#"> <font color="white">家用電器</font> </a> </td> </tr> <!--3.登錄檔單--> <tr> <td height="600px" background="../img/regist_bg.jpg"> <!--巢狀一個十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">會員註冊</font> &nbsp;&nbsp;&nbsp;USER REGISTER </td> </tr> <tr> <td> 使用者名稱 </td> <td> <input type="text" name="user" size="34px" id="user"/> </td> </tr> <tr> <td> 密碼 </td> <td> <input type="password" name="password" size="34px" id="password"/> </td> </tr> <tr> <td> 確認密碼 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td> 性別 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 驗證碼 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="註冊" /> </td> </tr> </table> </form> </td> </tr> <!--4.廣告圖片--> <tr> <td> <img src="../img/footer.jpg" width="100%"/> </td> </tr> <!--5.友情連結和版權資訊--> <tr> <td align="center"> <a href="#">關於我們</a> <a href="#">聯絡我們</a> <a href="#">招賢納士</a> <a href="#">法律宣告</a> <a href="#">友情連結</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服務宣告</a> <a href="#">廣告宣告</a> <p> Copyright © 2005-2016 傳智商城 版權所有 </p> </td> </tr> </table> </body> </html>

 

 

其中主要部分

1.頁面表單

<!--巢狀一個十行二列的表格-->
					<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
						<table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
							<tr height="40px">
								<td colspan="2">
									<font size="4">會員註冊</font> &nbsp;&nbsp;&nbsp;USER REGISTER 
								</td>
							</tr>
							<tr>
								<td>
									使用者名稱
								</td>
								<td>
									<input type="text" name="user" size="34px" id="user"/>
								</td>
							</tr>
							<tr>
								<td>
									密碼
								</td>
								<td>
									<input type="password" name="password" size="34px" id="password"/>
								</td>
							</tr>
							<tr>
								<td>
									確認密碼
								</td>
								<td>
									<input type="password" name="repassword" size="34px" id="repassword"></input>
								</td>
							</tr>
							<tr>
								<td>
									Emaile
								</td>
								<td>
									<input type="text" name="email" size="34px" id="eamil"/>
								</td>
							</tr>
							<tr>
								<td>
									姓名
								</td>
								<td>
									<input type="text" name="username" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									性別
								</td>
								<td>
									<input type="radio" name="sex" value="男"/>男
									<input type="radio" name="sex" value="女"/>女
								</td>
							</tr>
							<tr>
								<td>
									出生日期
								</td>
								<td>
									<input type="text" name="birthday" size="34px"/>
								</td>
							</tr>
							<tr>
								<td>
									驗證碼
								</td>
								<td>
									<input type="text" name="yzm" />
									<img src="../img/yanzhengma.png" />
								</td>
							</tr>
							<tr>
								<td colspan="2">
									<input type="submit" value="註冊" />
								</td>
							</tr>
						</table>
					</form>

2.js部分

<head>
		<meta charset="UTF-8">
		<title>別人的註冊頁面,參考</title>
		<script>
			function checkForm(){
				//alert("aa");
				/**校驗使用者名稱*/
				//1.獲取使用者輸入的資料
				var uValue = document.getElementById("user").value;
				//alert(uValue);
				if(uValue==""){
					//2.給出錯誤提示資訊
					alert("使用者名稱不能為空!");
					return false;
				}
				
				/*校驗密碼*/
				var pValue = document.getElementById("password").value;
				if(pValue==""){
					alert("密碼不能為空!");
					return false;
				}
				
				/**校驗確認密碼*/
				var rpValue = document.getElementById("repassword").value;
				if(rpValue!=pValue){
					alert("兩次密碼輸入不一致!");
					return false;
				}
				
				/*校驗郵箱*/
				var eValue = document.getElementById("eamil").value;
				if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
					alert("郵箱格式不正確!");
					return false;
				}
				
			}
		</script>
	</head>

 

效果圖