jQuery 表单验证 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../js/jquery-1.8.3.js"></script>
        <script src="../js/jquery.validate.min.js"></script>
        <script src="../js/messages_zh.js"></script>
        <style>
            #father{
                height: 800px;
                width: 700px;
                /*border: 1px solid red;*/
                margin: auto;
            }
            .first{
                height: 600px;
                width: 600px;
                /*border:1px solid;*/
                margin: 30px;
                font-size: 25px;
            }
            input{
                height: 30px;
                width: 300px;
                margin-top: 30px;
            }
            label.error{
                color: red;
                font-size: 18px;
            }
        </style>
        <script>
                $(function(){
                    $("#formCheck").validate({
                        rules:{
                            user:{
                                required:true,
                                minlength:6
                            },
                            password:{
                                required:true,
                                minlength:6,
                                digits:true
                            },
                            repassword:{
                                required:true,
                                minlength:6,
                                digits:true
                            },
                            email:{
                                required:true,
                                email:true
                            }
                        },
                            messages:{
                                user:{
                                required:"用户名不能为空",
                                minlength:"用户名不少于6"
                            },
                            password:{
                                required:"密码不能为空",
                                minlength:"密码不少于6位",
                                digits:"密码必须为正数"
                            },
                            repassword:{
                                required:"确认密码不能为空",
                                minlength:"确认密码不少于5位",
                                digits:"确认密码为整数"
                            },
                            email:{
                                required:"邮箱不能为空",
                                email:"邮箱格式不正确"
                            },
                            
                        }
                    })
                })
        </script>
    </head>
    <body>
        <div id="father">
            
                <h1>会员注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:#FFAB73 ; font-size: 18px;">小米商城</span>
                </h1>
                
                <hr style="height: 2px; background-color:#FF8D41 ;width: 700px;"/>
                <div class="first">
                    <form action="#" method="post" id="formCheck">
                    用 &nbsp;户&nbsp;&nbsp;名：<input type="text" placeholder="请输入你的用户名" name="user" id="user" /><br />
                    密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" placeholder="请输入你的密码" name="password" id="password" /><br />
                    确认密码：<input type="password" placeholder="请确认你的密码" name="repassword" id="repassword" /><br />
                    邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<input type="email" placeholder="请输入你的邮箱" name="email" id="email" /><br />
                    <input type="submit" value="立   即   注   册" style="background: #FF6600;font-weight: bold; color: white;"/>
                    </form>
            </div>
        </div>
    </body>
</html>

 

posted @ 2019-03-07 09:10  芯-觞  阅读(97)  评论(0)    收藏  举报