HTML基礎學習（二）---註冊頁面書寫

查看網頁源代碼：F12

附百度彩蛋：

一、註冊頁面基本內容

1.頁面標題

<title>BLM(BLM.COM)-及時配送，宅男必備，飽了麼等你加入！</title>

2.註冊後跳轉頁面到index.html

<form action="index.html">
	......
</form>

3.用戶名、密碼、確認密碼

用戶名:<input type="text" name="username" />
<br />
密碼:<input type="password" name="pass" />
<br />
確認密碼:<input type="password" name="repass" />

text:定義單行的輸入字段，用戶可在其中輸入文本。默認寬度爲 20 個字符。
password:定義密碼字段。該字段中的字符被掩碼。

4.手機號、郵箱

手機號：<input type="number" name="phone" />
<br />
郵箱:<input type="text" name="email" />

5.性別

性別:<input type="radio" name="sex" />男
	<input type="radio" checked="checked" name="sex" />女

radio:定義單選按鈕。
checked=“checked” 默認選中

6.愛好

愛好:<input type="checkbox" name="like" value="學習" />學習
	<input type="checkbox" name="like" value="看書" />看書
	<input type="checkbox" name="like" value="打遊戲" />打遊戲
	<input type="checkbox" name="like" value="打聯盟" />打聯盟
	<input type="checkbox" name="like" value="喫" />喫

checkbox:定義複選框。

7.所在城市

所在城市:
			<select>
				<option value="010">北京</option>
				<option value="022">上海</option>
				<option value="023">天津</option>
				<option value="024">南京</option>
			</select>

8.用戶協議

用戶協議：
<br />
<textarea cols="60" rows="6">
				北京陌陌科技有限公司（以下簡稱“陌陌科技”）在此特別提醒您（用戶）在註冊成爲用戶之前，請認真閱讀本《用戶協議》（以下簡稱“協議”），確保您充分理解本協議中各條款。請您審慎閱讀並選擇接受或不接受本協議。除非您接受本協議所有條款，否則您無權註冊、登錄或使用本協議所涉服務。您的註冊、登錄、使用等行爲將視爲對本協議的接受，並同意接受本協議各項條款的約束。

本協議約定陌陌科技與用戶之間關於“陌陌”軟件服務（以下簡稱“服務”）的權利義務。“用戶”是指註冊、登錄、使用本服務的個人。本協議可由陌陌科技隨時更新，更新後的協議條款一旦公佈即代替原來的協議條款，恕不再另行通知，用戶可在本網站查閱最新版協議條款。在陌陌科技修改協議條款後，如果用戶不接受修改後的條款，請立即停止使用陌陌科技提供的服務，用戶繼續使用陌陌科技提供的服務將被視爲接受修改後的協議。
</textarea>
<br />
<input type="checkbox" checked="checked" name="like" value="同意" />

9.註冊

	<input type="submit" value="登陸" />

submit:定義提交按鈕。提交按鈕會把表單數據發送到服務器。

---

button: 定義可點擊按鈕（多數情況下，用於通過 JavaScript 啓動腳本）。
file:定義輸入字段和 "瀏覽"按鈕，供文件上傳。
hidden:定義隱藏的輸入字段。
image:定義圖像形式的提交按鈕。
reset:定義重置按鈕。重置按鈕會清除表單中的所有數據。

---

二、補充驗證

1.加上onsubmit

<form action="divDemo.html" onsubmit="return checkForm()">

2.在input中加入onblur，id，以及< span id=“nameMsg”>

用戶名:<input onblur="checkName()" id="username" type="text" name="username" placeholder="請輸入用戶名"/>
<span id="nameMsg"></span>

3.引入jQuery

	<script src="js/jquery-1.11.0.js"></script>

4.一個進行驗證的函數

function checkForm(){
//			if (username==null||username=="") {
//				alert("請輸入用戶名");
//				return false;
//			} else{
//				return true;
//			}
			if (checkName()&&checkPass()&&checkRepass()&&checkPhone()&&checkEmail()) {
				return true;
			} else{
				return false;
			}	
		
		}

5.用戶名驗證

//檢查用戶名
		function checkName(){
			var username=$("#username").val();
			
			if(username.length>6){
				$("#nameMsg").html("<font color='green'>輸入正確</font>")
				
				return true;
			}else{
				$("#nameMsg").html("<font color='red'>用戶名是六位以上</font>")
//				alert("用戶名要六位以上！！！");
				return false;
			}
		}

6.密碼驗證

//檢測密碼
		function checkPass(){
			var pass=$("#pass").val();
			
			if(pass.length>6){
				$("#passMsg").html("<font color='green'>輸入正確</font>")
				
				return true;
			}else{
				$("#passMsg").html("<font color='red'>密碼需要六位以上</font>")
				
//				alert("密碼要六位以上！！！");
				return false;
			}
		}

7.確認密碼驗證

//檢測密碼
		function checkPass(){
			var pass=$("#pass").val();
			
			if(pass.length>6){
				$("#passMsg").html("<font color='green'>輸入正確</font>")
				
				return true;
			}else{
				$("#passMsg").html("<font color='red'>密碼需要六位以上</font>")
				
//				alert("密碼要六位以上！！！");
				return false;
			}
		}

8.手機號驗證，需要正則表達式

function checkPhone(){
			var phone=$("#phone").val();
			//正則表達式,以1開頭，後面10位數字
			var reg=/^1\d{10}$/;
			
			if(reg.test(phone)){
				$("#phoneMsg").html("<font color='green'>輸入正確</font>")
				
				return true;
			}else{
				$("#phoneMsg").html("<font color='red'>請輸入正確手機號!!</font>")
				
//				alert("請輸入正確手機號！！！");
				return false;
			}
		}

9.郵箱驗證

function checkEmail(){
			var email=$("#email").val();
			//正則表達式
			var reg=/^\w+@\w+\.\w{2,}$/;
			
			if(reg.test(email)){
				$("#emailMsg").html("<font color='green'>輸入正確</font>")
				
				return true;
			}else{
				$("#emailMsg").html("<font color='red'>請輸入正確郵箱!!!</font>")
				
//				alert("請輸入正確郵箱！！！");
				return false;
			}
		}

三、完整代碼

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BLM(BLM.COM)-及時配送，宅男必備，飽了麼等你加入！</title>
	</head>

	<body>
		<form action="divDemo.html" onsubmit="return checkForm()">
			用戶名:<input onblur="checkName()" id="username" type="text" name="username" placeholder="請輸入用戶名" />
			<span id="nameMsg"></span>
			<br /> 密碼:
			<input id="pass" type="password" name="pass" onblur="checkPass()" />
			<span id="passMsg"></span>
			<br /> 確認密碼:
			<input id="repass" type="password" name="repass" onblur="checkRepass()" />
			<span id="repassMsg"></span>

			<br /> 手機號：
			<input id="phone" type="number" name="phone" onblur="checkPhone()" />
			<span id="phoneMsg"></span>

			<br /> 郵箱:
			<input id="email" type="text" name="email" onblur="checkEmail()" />
			<span id="emailMsg"></span>

			<br /> 性別:
			<input type="radio" name="sex" />男
			<input type="radio" checked="checked" name="sex" />女
			<br /> 愛好:
			<input type="checkbox" name="like" value="學習" />學習
			<input type="checkbox" name="like" value="看書" />看書
			<input type="checkbox" name="like" value="打遊戲" />打遊戲
			<input type="checkbox" name="like" value="打聯盟" />打聯盟
			<input type="checkbox" name="like" value="喫" />喫
			<br /> 所在城市:
			<select>
				<option value="010">北京</option>
				<option value="022">上海</option>
				<option value="023">天津</option>
				<option value="024">南京</option>
			</select>
			<br /> 用戶協議：
			<br />
			<textarea cols="60" rows="6">青島飽了麼科技有限公司（以下簡稱“飽飽科技”）在此特別提醒您（用戶）在註冊成爲用戶之前，請認真閱讀本《用戶協議》（以下簡稱“協議”），確保您充分理解本協議中各條款。請您審慎閱讀並選擇接受或不接受本協議。除非您接受本協議所有條款，否則您無權註冊、登錄或使用本協議所涉服務。您的註冊、登錄、使用等行爲將視爲對本協議的接受，並同意接受本協議各項條款的約束。
本協議約定飽飽科技與用戶之間關於“飽飽”軟件服務（以下簡稱“服務”）的權利義務。“用戶”是指註冊、登錄、使用本服務的個人。本協議可由飽飽科技隨時更新，更新後的協議條款一旦公佈即代替原來的協議條款，恕不再另行通知，用戶可在本網站查閱最新版協議條款。在飽飽科技修改協議條款後，如果用戶不接受修改後的條款，請立即停止使用飽飽科技提供的服務，用戶繼續使用飽飽科技提供的服務將被視爲接受修改後的協議。
			</textarea>
			<br />
			<input type="checkbox" checked="checked" value="同意" />同意
			<br />
			<input type="submit" value="註冊" />
		</form>
	</body>

	<script src="js/jquery-1.11.0.js"></script>
	<script>
		function checkForm() {
			//			if (username==null||username=="") {
			//				alert("請輸入用戶名");
			//				return false;
			//			} else{
			//				return true;
			//			}
			if(checkName() && checkPass() && checkRepass() && checkPhone() && checkEmail()) {
				return true;
			} else {
				return false;
			}

		}

		//檢查用戶名
		function checkName() {
			var username = $("#username").val();

			if(username.length > 6) {
				$("#nameMsg").html("<font color='green'>輸入正確</font>")

				return true;
			} else {
				$("#nameMsg").html("<font color='red'>用戶名是六位以上</font>")
				//				alert("用戶名要六位以上！！！");
				return false;
			}
		}

		//檢測密碼
		function checkPass() {
			var pass = $("#pass").val();

			if(pass.length > 6) {
				$("#passMsg").html("<font color='green'>輸入正確</font>")

				return true;
			} else {
				$("#passMsg").html("<font color='red'>密碼需要六位以上</font>")

				//				alert("密碼要六位以上！！！");
				return false;
			}
		}

		//檢測確認密碼
		function checkRepass() {
			var repass = $("#repass").val();
			var pass = $("#pass").val();

			if(repass == pass) {
				$("#repassMsg").html("<font color='green'>輸入正確</font>")

				return true;
			} else {
				$("#repassMsg").html("<font color='red'>兩次密碼不同！</font>")

				//				alert("密碼和確認密碼不同！！！");
				return false;
			}
		}

		//檢測手機號
		function checkPhone() {
			var phone = $("#phone").val();
			//正則表達式,以1開頭，後面10位數字
			var reg = /^1\d{10}$/;

			if(reg.test(phone)) {
				$("#phoneMsg").html("<font color='green'>輸入正確</font>")

				return true;
			} else {
				$("#phoneMsg").html("<font color='red'>請輸入正確手機號!!</font>")

				//				alert("請輸入正確手機號！！！");
				return false;
			}
		}

		//檢測郵箱
		function checkEmail() {
			var email = $("#email").val();
			//正則表達式
			var reg = /^\w+@\w+\.\w{2,}$/;

			if(reg.test(email)) {
				$("#emailMsg").html("<font color='green'>輸入正確</font>")

				return true;
			} else {
				$("#emailMsg").html("<font color='red'>請輸入正確郵箱!!!</font>")

				//				alert("請輸入正確郵箱！！！");
				return false;
			}
		}
	</script>

</html>