<!DOCTYPE html>
<html>

<head>
	<title>8_常用注册页面的表单实例（含验证）.html</title>

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="this is my page">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">

	<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<style type="text/css">
		body {
			background-image: url(https://imgchr.com/content/images/system/home_cover_1552414407320_3a5f92.jpg);
			background-repeat: no-repeat;
			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			background-attachment: fixed;
			/*此条属性必须设置否则可能无效*/
			/* 让背景图基于容器大小伸缩 */
			background-size: cover;
			/* 设置背景颜色，背景图加载过程中会显示背景色 */
			background-color: #CCCCCC;
		}

		#user_reg {
			font-family: 微软雅黑;
			font-size: 40px;
			text-align: center;
			margin-top: 200px;
		}

		form {
			width: 500px;
			/*设置宽度，方便使其居中*/
			margin: 40px auto auto auto;
			/*上右下左*/
			font-size: 25px;
		}

		input {
			height: 30px;
			width: 12em;
			margin-top: 5px;
			margin-bottom: 5px;
		}

		/*input标签下的属性选择器*/
		input[type="submit"],
		input[type="reset"] {
			height: 25px;
			width: 5em;
			margin-top: 5px;
			margin-left: 6px;
		}
	</style>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>


<script type="text/javascript">
	//onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码：
	//函数1：验证邮箱格式
	function validate_username(username) {
		//定义正则表达式的变量:邮箱正则
		var userNameReg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
		//console.log(username);
		if (username != "" && username.search(userNameReg) != -1) {
			document.getElementById("test_user").innerHTML = "<font color='green' size='3px'>√用户名格式正确</font>";
		} else {
			document.getElementById("test_user").innerHTML = "<font color='red' size='3px'>用户名格式错误</font>";
		}
	}
	function validate_email(email) {
		var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		console.log(emailReg);
		if (emailReg != "" && email.search(emailReg) != -1) {
			document.getElementById("test_email").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
		} else {
			document.getElementById("test_email").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
		}
	}


	//函数2：验证密码是否符合要求：匹配6位密码，由数字和字母组成：
	function validate_password(password) {
		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
		var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
		if (password != "" && password.search(passwordReg) != -1) {
			document.getElementById("test_pw").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
		} else {
			document.getElementById("test_pw").innerHTML = "<font color='red' size='3px'>密码格式错误</font>";
			alert("密码有6位，由数字和字母组成!");
		}
	}

	//函数3：验证两次输入的密码是否一样
	function validate_password2(password2) {
		var password = document.getElementById("password").value;
		console.log(password);
		console.log(password2);
		if (password == "") {
			document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>密码不为空</font>";
		} else if (password == password2) {
			document.getElementById("is_test_pw").innerHTML = "<font color='green' size='3px'>√两次输入的密码相同</font>";
		} else {
			document.getElementById("is_test_pw").innerHTML = "<font color='red' size='3px'>两次输入的密码不相同</font>";
		}
	}

	//函数4：验证表单是否已经填好
	function validate_form() {
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var password2 = document.getElementById("password2").value;
		//console.log("表单填写正确，可以正常提交！");

		//这三个，如果任何一个有问题，都返回false
		//18128@qq.com		12345y
		var userNameReg = /^[\u4e00-\u9fa5_a-zA-Z0-9]+$/;
		var passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;

		if (username != "" && userNameReg.test(username)) {
			if (password != "" && passwordReg.test(password)) {
				if (password2 == password) {
					alert("信息填写正确，可以正常提交！");
					console.log("信息填写正确，可以正常提交！");
					sendRestfulGet();
					return true;
				} else {
					alert("密码不一致，提交失败，请重新填写！");
					console.log("密码不一致，提交失败，请重新填写！");
					return false;
				}
			} else {
				alert("密码格式错误，提交失败，请重新填写！");
				console.log("密码格式错误，提交失败，请重新填写！");
				return false;
			}
		} else {
			alert("注册的账号不符合要求，提交失败，请重新填写！");
			console.log("注册的账号不符合要求，提交失败，请重新填写！");
			return false;
		}

	}

	function sendRestfulGet() {
		var doubanURL = 'http://matopen.com/api/v1/user/register/';
		$.ajax({
			url: doubanURL,
			type: 'Post',
			data: {
				username:'hzy_test_1',
				password:'123456',
				re_password:'123456',
				email:'1295752786@qq.com',
				
			},
			dataType: 'json',
			crossDomain: true,
			success: function (data) {
				console.log(data);
			}
		});
	}
</script>

<body>
	<div id="user_reg">用户注册:</div>
	<form action="" method="" name="form">
		<table>
			<tr>
				<td>用户名：</td>
				<td><input type="text" id="username" name="username" placeholder="用户名"
						onblur="validate_username(this.value)" /></td>
				<td id="test_user"></td>
			</tr>
			<tr>
				<td>邮箱：</td>
				<td><input type="text" id="email" name="username" placeholder="邮箱"
						onblur="validate_email(this.value)" /></td>
				<td id="test_email"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" id="password" name="password" placeholder="6位密码由数字和字母组成"
						onblur="validate_password(this.value)" /></td>
				<td id="test_pw"></td>
			</tr>
			<tr>
				<td>重复密码：</td>
				<td><input type="password" id="password2" name="password2" onblur="validate_password2(this.value)" />
				</td>
				<td id="is_test_pw"></td>
			</tr>
			<tr>
				<td><input type="submit" id="submit_form" value="注册" onclick="return validate_form()" />
					<input type="reset" value="重置" />
				</td>
			</tr>
		</table>
	</form>
</body>

</html>