Untitled

<html>
<head>

<style>
.content {
	margin: 0 auto;
	width: 450px;
	padding: 10px 0;
	position: relative;
	font-size: 15px;
	font-family: Arial;
	border: 1px solid black;
}
.form {
	width: 100%;
	position: relative;
}

.row {
	padding: 10px 0;
	clear: both;
	height: 35px;
	position: relative;
}
.lab {
	float: left;
	width: 25%;
	text-align: right;
	margin-right: 20px;
	height: 35px;
	line-height: 35px;
}
.input {
	width: 65%;
	height: 35px;
	line-height: 35px;
	float: left;

}

.form .txt {
	height: 35px;
	line-height: 35px;
	width: 90%;
}
.radio {
	width: 26px;
}

.button {
	padding: 20px 10% 0 0;
	height: 40px;
}
button {
	height: 40px;
	float: right;
	padding: 5px 15px;
}

.error {
	background: red;
	height: 20px;
	float: none;
	padding-left: 30%;
	display: none;
}

</style>
</head>
<body>

<div class="page-content">
	<div class="content">
		<div>
			<div class="form">
				<div class="row">
					<div class="lab">UserName</div>
					<div class="input">
						<input type="text" id="txtUser" class="txt" name="txtUser">
					</div>
				</div>
				<div id="error-user" class="display-none error">username phai lon hon 6 ki tu</div>
				<div class="row">
					<div class="lab">Email</div>
					<div class="input">
						<input type="text" id="txtEmail" class="txt" name="txtEmail">
					</div>
				</div>
				<div id="error-email" class="display-none error">email co dang abc@def.xyz</div>
				<div class="row">
					<div class="lab">Password</div>
					<div class="input">
						<input type="password" id="txtPass" class="txt" name="txtPass">
					</div>
				</div>
				<div class="row">
					<div class="lab">Enterpass</div>
					<div class="input">
						<input type="password" id="txtRepass" class="txt" name="txtRepass">
					</div>
				</div>
				<div id="error-pass" class="display-none error">password khong trung</div>
				<div class="row">
					<div class="lab">GioiTinh:</div>
					<div class="input">
						<input type="radio" class="radio" name="gioitinh" value="nam">Nam
						<input type="radio" class="radio" name="gioitinh" value="nu">Nu
					</div>
				</div>
				<div class="row">
					<div class="lab">Native</div>
					<div class="input">
						<input type="range" id="rgNative" class="txt" name="rgNative">
					</div>
				</div>
			</div>
			<div class="button">
				<button id="btn-regis" onclick="check()"> Register</button>
			</div>
		</div>
	</div>


</div>
<script>
function check(){
	var username = document.getElementById("txtUser").value,
		email = document.getElementById("txtEmail").value,
		pass = document.getElementById("txtPass").value,
		repass= document.getElementById("txtRepass").value;
	if(!validateEmail(email) || email =="")
		document.getElementById("error-email").style.display="block";
	else
		document.getElementById("error-email").style.display="none";
	if(!validateUser(username))
		document.getElementById("error-user").style.display="block";
	else
		document.getElementById("error-user").style.display="none";
	if(pass=="" || repass=="" || !validatePass(pass, repass))
		document.getElementById("error-pass").style.display="block";
	else
		document.getElementById("error-pass").style.display="none";
}
function validateEmail(email){
	var em = /^([a-z0-9_\.\-\+]+)@([\da-z\.\-]+)\.([a-z\.]{2,6})$/i;
	return em.test(email);
}
function validateUser(username){
	if(username.length >6)
		return true;
	else
		return false;
}
function validatePass(pass, repass){
	if(pass === repass)
		return true;
	else
		return false;
}

</script>
</body>
</html>