当前位置: 首页 > 工具软件 > jQuery cForm > 使用案例 >

validate+jquery+ajax表单验证

巫马昆琦
2023-12-01

对于表单提交,这儿我就不多说,相信大家会来这儿,想必对基本的表单提交都会了。但如果是要对表单进行验证,而且是异步提交。在官方的文档里没有很明确的说明,当然,在官方的文档里也会有说,只是官方的文档说的实在是太太专业了,对于小冰这样的菜鸟并不能完全体会。在小冰的百度之下,终于找到了解决的方法。不多说,直接上代码。
注:本文属于转载,请作者见谅代码,代码会跟作者有有所不同,但原理还是一样的。

<form class="cForm" id="cForm" method="post" action="">
    <p><label for="user">名字</label><input id="name" name="user" required minlength="3"></p>
    <p><label for="keyword">关键词</label><input id="password" type="password" maxlength="12" name="password">
    </p><p><input class="submit" type="submit" value="登录"></p>
</form>
$(function(){
    $('#form').validate({
        onsubmit:true,// 是否在提交是验证
      onfocusout:false,// 是否在获取焦点时验证
      onkeyup :false,// 是否在敲击键盘时验证
        rules:{
            name:{
                required:true,
                minlength:2
            },
            keyword:{
                required:true,
            },
        },
        messages:{
            name:{
                required:'请输入网站名字',
                minlength:'网站名字不能少于2位'
            },
            keyword:{
                required:'请输入关键词',
            }
        },
        errorElement:"b",
        showErrors: function(errorMap, errorList) {
            for (var element in errorMap) {
                $("#" + element).next("em").removeClass();
                //去除success样式和字体图标,不去除会跟错误信息一起出现
            }
            this.defaultShowErrors();
            //默认的错误信息显示样式
        },
        submitHandler:function(form){
            $.ajax({
                url:url,
                type:'post',
                data:data,
                dataType:'json',
                success:function(res){
                    console.log(res);
                }
            })
        },
        invalidHandler: function(form, validator) {return false;}
    })
})
 类似资料: