jquery.validate.js表单验证

Posted wzzkaifa

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery.validate.js表单验证相关的知识,希望对你有一定的参考价值。

引用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文件,否则不会提交该表单。这个在其它博客中没有写到,是自己发现的。










































































以上是关于jquery.validate.js表单验证的主要内容,如果未能解决你的问题,请参考以下文章

表单验证插件之jquery.validate.js

Jquery.validate.js实现前端表单验证

jQuery表单验证插件——jquery.validate.js

jquery.validate.js表单验证

jQuery插件 -- 表单验证插件jquery.validate.js

jQuery.validate.js表单验证插件