jquery.validate+jquery.form表单验证提交

1.通过jquery.validate的submitHandler选项，即当表单通过验证时运行回调函数。在这个回调函数中通过jquery.form来提交表单；

<script type="text/javascript" src="{$site_url}/assets/js/jquery-1.11.1.min.js"></script>
<script src="{$site_url}/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="{$site_url}/js/jquery.form.min.js"></script>
<script>
$(function(){
    $("#myform").validate({
        focusCleanup:true,focusInvalid:false,
        errorClass: "unchecked",
        validClass: "checked",
        errorElement: "span",
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                type:'post',
                url: '__URL__/recharge_handle',
                beforeSubmit: showRequest,  //提交前处理
                success: showResponse,  //处理完成
                resetForm: null,
                dataType: 'json'
            });
        }
    });
});
function showRequest(formData, jqForm, options) {
    $("input[name='submit']").attr('disabled',true).css({background:'gray'}).val('提交中...');
}
function showResponse(data, statusText) {
    $("input[name='submit']").attr('disabled',false).css({background:'#013CA6'}).val('提交');
    //alert(JSON.stringify(data));
    }
</script>

2.通过jquery.form的beforeSubmit，即在提交表单前运行的回调函数，这个函数假设返回true，则提交表单，假设返回false，则终止提交表单。
依据jquery.validate插件的valid()方法，就能够通过jquery.form提交表单时来对表单进行验证。

<script>
    $(function(){
        $('#myform').submit(function(){
            $(this).ajaxSubmit({
                type:"post",
                url:"__URL__/recharge_handle",
                beforeSubmit:showRequest,
                success:showResponse
            });
            return false; //此处必须返回false，阻止常规的form提交
        });
        $('#myform').validate({
            focusCleanup:true,focusInvalid:false,
            errorClass: "unchecked",
            validClass: "checked",
            errorElement: "span"
        });
    });
    function showRequest(formData, jqForm, options) {
        return $("#myform").valid();
    }
    function showResponse(data, statusText) {
            alert(JSON.stringify(data))
        }
</script>

3.通过jquery.validate验证表单的validate方法。这种方法的优点是对表单验证的控制更加自由

<script>
    var options={
        focusCleanup:true,focusInvalid:false,
        errorClass: "unchecked",
        validClass: "checked",
        errorElement: "span",
        errorPlacement:function(error,element){
            var s=element.parent().find("span[htmlFor='" + element.attr("id") + "']");
            if(s!=null){
                s.remove();
            }
            error.appendTo(element.parent());
        },
        success: function(label) {
            label.removeClass("unchecked").addClass("checked");
        },
        rules:{
            username:{required:true,minlength:3},
            email:{
                required:true
            }
        }
    };
    $(function(){
        validator=$('#myform').validate(options);
        $("#reset").click(function(){
            validator.resetForm();
        });
        $('#myform').submit(function(){
            $(this).ajaxSubmit({
                type:"post",
                url:"__URL__/recharge_handle",
                beforeSubmit:showRequest,
                success:showResponse
            });
            return false; //此处必须返回false，阻止常规的form提交
        });
    });
    function showRequest(formData, jqForm, options) {
        return $("#myform").valid();
    }
    function showResponse(data, statusText) {
            alert(JSON.stringify(data));
        }
</script>