jquery.validate.js表单验证

Posted 2020-09-12 wzzkaifa

引用jquery封装好的js文件进行表单验证，提高了Web开发的效率。我写了一个验证的实例给大家展示一下。

实例中包括的验证方法还不全面，假设没有大家想要的能够通过

百度搜索关键：jquery.validate.js表单验证帮助文档来进行查阅。

引入的js文件：

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>

<script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>

    <script type="text/javascript" src="js/usercenter.js"></script>

登录界面的form表单：

            <form class="form-horizontal" method="post" id="LoginForm">
                          <div id="iyoutingche-formgroup">
                            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                              <input type="text" class="form-control" name="user_email" value="${cookie.email.value }" id="email" placeholder="Email">
                            </div>
                          </div>
                          <div id="iyoutingche-formgroup">
                            <label for="inputPassword3" class="col-sm-2 control-label">password</label>
                            <div class="col-sm-10">
                              <input type="password" class="form-control" value="${cookie.password.value }" name="user_password" id="password" placeholder="Password">
                            </div>
                          </div>
                          <div id="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                              <div class="checkbox">
                                <label>
                                  <input type="checkbox" name="isAuto" value="1" checked="checked"> 记住password
                                </label>
                              </div>
                            </div>
                          </div>
                          <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                            <span id="info"></span>
                              <button type="submit" class="btn btn-default btn-lg" id="Loginbtn">登录</button>
                              <a href="">没有注冊？</a>
                            </div>
                          </div>
                       </form>

usercenter.js文件：

$("#LoginForm").validate({
        rules:{
            user_email: {
                required: true,
                email:true
            },
            user_password:{
                required:true,
                minlength: 5,
            },
        },
        messages:{
            user_email:{
                required:"请输入邮箱",
                 email: "请输入正确的email地址"
            },
            user_password:{
                    required:"请输入password",
                    minlength: jQuery.validator.format("输入不小于5位数的字符"),
            },
        },
        submitHandler:function(form){
            $(form).ajaxSubmit({
                url:‘UserCheckLoginSer‘,
                type:‘POST‘,
                success:function(data){
                    if(data=="true"){
                        var email = $("#email").val();
                        //设置cookie
                    //    $.cookie(‘cookieName‘,email,{expires: 7,path:‘/‘,secure: false,raw:false});  
                        $.cookie(‘cookieName‘,email,{expires: 7});
                    //    cookieSave = $.cookie(‘cookieName‘,email);
                        location.reload();
                    }else{
                        $("#info").append("<b>错误的username或password</b><br/>");
                    }
                }
            });
        }
    });

注意 当使用ajaxSubmit将form表单提交到后台是。一定要引入jquery.form.js文件，否则不会提交该表单。这个在其它博客中没有写到，是自己发现的。