Jquery validate(submitHandler函数)验证通过发送Ajax

 

所需要插件：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://malsup.github.io/jquery.form.js"></script>

 

<form  id="myform" action="/de">
    请输入账号：
    <input id="username"  type="text" name="username">
    请输入密码：
    <input id="password" type="password" name="password">

    <button class="one" type="submit">提交</button>

</form>

$(function(){
    $("#myform").validate({
        rules:{
            username:{
                required:true,
                checkUsername:true
            },
            password:{
                required:true,
                rangelength:[8,12]
            }
        },
        message:{
            username:{
                required:"用户名不能为空",
                checkUsername:"用户名已存在"
            },
            password:{
                required:"密码不能为空",
                rangelength:"至少输入6个字符,但是不超过12个字符"
            }
        },
        onkeyup:false,
        debug: true,
        success:"valid",
        submitHandler:function(form){
            $(form).ajaxSubmit({
                type: 'POST',
                url: "/de" ,
                success: function(data){

                },
                error: function(){
                }
            });
        }
    });
});

如上诉代码来看：.validate({}）方法里面是以json格式来写入的。里面简单来写了几种属性。

1.required:true  设置该项内容为必填                                          Boolean类型

2.rangelength[8,12] 设置内容的字符长度范围                             Array类型

  二、发送ajax请求

submitHandler:function(form){
    $(form).ajaxSubmit({
        type: 'POST',
        url: "/de" ,
        success: function(data){

        },
        error: function(){
        }
    });
}

通过这个方法可以向后台传入值。

 

           优点：当我们使用ajax给controller传值的时候。从controller哪里return的只有json数据。不能跳转页面。使用form表单来向controller传值值。又没有了传值成功之后的success回调函数。所以。这种基于submitHandler函数可以实现俩种方法。