<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>注册页面</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
function checkUsername() {
var reg = /^\w{6,12}$/;
var username = $("#username").val();
var b = reg.test(username);
if (b) {
$("#username").css("border", "1px solid green")
$("#span").html("")
} else {
$("#span").html("账号必须是6-12位")
}
return b;
}
function checkEmail() {
var reg = /^\w+@\w+\.\w+$/;
var address = $("#address").val();
var b = reg.test(address);
if (b) {
$("#address").css("border", "1px solid green")
$("#address").html("")
} else {
$("#address").html("邮箱格式不正确")
}
return b;
}
$(function () {
$("#from").submit(function () {
if (checkUsername() && checkEmail()) {
$.post("register", $(this).serialize(), function (data) {
if (data.flag) {
location.href = "login.html";
} else {
$("#errMsg").html(data.errorMsg)
}
}, "json")
}
return false;
})
$("#username").blur(checkUsername);
$("#email").blur(checkEmail);
})
</script>
</head>
<body>
<form class="form-horizontal" id="from">
<div>
<span id="errMgs" style="color: red"></span>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">账号:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="username" style="width: 200px">
<div><font id="span" color="red"></font></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="password" style="width: 200px">
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">邮件</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" name="address" placeholder="address" style="width: 200px">
<div><font id="eamli" color="red"></font></div>
</div>
</div>
<div class="radio">
<label for="username" class="col-sm-2 control-label">性别:</label>
<label>
<input type="radio" name="gender" id="nan" value="男" checked>
男
</label>
<label>
<input type="radio" name="gender" id="nv" value="女" checked>
女
</label>
<div id="errMsg"></div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">注册</button>
</div>
</div>
</form>
</body>
</html>