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>
validate验证注册表单

猜你喜欢
