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>