validate验证注册表单
点击预览;
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<script>
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules : {
username : {
required : true,
minlength : 2
},
password : {
required : true,
minlength : 5
},
confirm_password : {
required : true,
minlength : 5,
equalTo : "#password"
},
email : {
required : true,
email : true
},
agree : "required"
},
messages : {
username : {
required : "请输入用户名",
minlength : "用户名必需由两个字母组成"
},
password : {
required : "请输入密码",
minlength : "密码长度不能小于 5 个字母"
},
confirm_password : {
required : "请输入密码",
minlength : "密码长度不能小于 5 个字母",
equalTo : "两次密码输入不一致"
},
email : "请输入一个正确的邮箱",
agree : "请接受我们的声明"
}
});
});
</script>
<style type="text/css">
.error {
color: red;
}
.register-form {
width: 20%;
max-width: 400px;
margin: 80px auto;
}
.register-form #btn {
margin: 35px auto;
text-align: center;
}
.register-form button {
width: 49%;
}
</style>
</head>
<body>
<div class="register-form">
<form id="signupForm" method="get" action="getInfo.jsp">
<div class="form-group">
<label for="username">用户名</label> <input class="form-control" id="username"
name="username" type="text">
</div>
<div class="form-group">
<label for="password">密码</label> <input class="form-control" id="password"
name="password" type="password">
</div>
<div class="form-group">
<label for="confirm_password">验证密码</label> <input class="form-control"
id="confirm_password" name="confirm_password" type="password">
</div>
<div class="form-group">
<label for="email">Email</label> <input class="form-control" id="email" name="email"
type="email">
</div>
<div class="form-group">
<label for="agree">请同意我们的声明：</label><a href="#">中华人民共和国互联网管理条例</a><input class="radio-inline" type="checkbox"
id="agree" name="agree">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</form>
</div>
</body>
</html>
