JQuery验证成功之后,使用ajax提交数据

 1 function checkForm(){
 2     validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID
 3         errorElement :"span",// 使用"div"标签标记错误, 默认:"label","span"默认直接在文本框右边显示
 4         //wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
 5         //errorClass :"validate-error",// 错误提示的css类名"error"
 6         //onsubmit:false,// 是否在表单提交时验证,默认:true
 7         //onfocusout:false,// 是否在获取焦点时验证,默认:true
 8         //onkeyup :false,// 是否在敲击键盘时验证,默认:true
 9         //onclick:false,// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
10         //focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示,默认false
11         //focusInvalid : true, //提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点,默认true
12         //ignore: "#cname"  //对某些元素不做验证,值对应选择器,如果需要忽略多个文本框,可以使用class类选择器
13         ignoreTitle: true,
14         validClass: "valid", //验证成功时,使用的css类名
15         success: function(label) { //验证成功时使用的提示消息
16              label.addClass("valid").html("Ok!")
17            },
18         submitHandler:function(form){//如果验证通过,点击submit按钮后执行的操作,注:使用此方法后,form中的action="xx"会失效
19             alert(‘验证通过‘);
20         },
21         invalidHandler: function(form, validator) {//如果验证不通过,此处执行额外操作
22               var errors = validator.numberOfInvalids(); //获得错误总数
23             var message = ‘你存在‘ + errors + ‘个错误‘;
24             //alert(message);
25         },
26         rules:{
27             "x.name":{  //需要进行验证的输入框name
28                 required: true,  //验证条件:必填
29                 minlength3: 5,// 验证条件:最小长度为5
30                 maxlength3 : 10,
31                 checkCharType : [true,false,false,null]
32             },
33             "x.sex":{  //需要进行验证的输入框name
34                 required: true,  //验证条件:必填
35                 minlength2: 5,// 验证条件:最小长度为5
36                 maxlength2 : 10
37             },
38         },
39         messages:{
40             "x.name":{
41                 required : "不能为空",
42                 minlength : "最小值为5"
43             },
44             "x.sex":{
45                 required : "不能为空",
46                 minlength : "最小值为5"
47             }
48         }
49     });
50 }
51
52 function xx(){
53     //alert($("#commentForm").validate().form()); //执行表单验证,同时判断验证是否通过,如果通过返回true,否则返回false
54     $("#commentForm").valid(); //$("#commentForm").valid()表示运行form的表单验证
55 }
56
57 function cl(){
58     $("#commentForm").validate().resetForm(); //清空所有的错误提示
59 }

转载至:http://blessht.iteye.com/blog/1074419

时间: 2024-07-29 08:21:02

JQuery验证成功之后,使用ajax提交数据的相关文章

jQuery 中 ajax 提交数据应用的一个小demo

举一个jquery中ajax的应用小 demo 便于以后的更多项目拓展 ,这里要注意的是保存的文件名问题 ... ajax02.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="form&qu

AJAX提交数据成功但不会跳转页面

HTML页面通过ajax提交数据成功,但是会执行多次success方法,不会跳转到指定页面 解决办法;把button的type改为button即可 1 <button type="button" id="addBtn" class="btn btn-primary btn-lg">添加</button> 2 3 <script type="text/javascript"> 4  $(&qu

ajax提交数据问题

加入traditional:true属性 traditional 类型:Boolean 如果你想要用传统的方式来序列化数据,那么就设置为 true.请参考工具分类下面的 jQuery.param 方法. $.ajax({ type: "POST", url: url, traditional:true, data:{ data:[0,1] }, dataType: "json", async:false }); ajax提交数据问题

JavaWeb开发中form、ajax提交数据Model转化

JavaWeb开发中form.ajax提交数据Model转化 问题 最近学习MongoDB数据库,作为java开发的我,当然需要做个小的web程序来测试一番了.在html中我采取ajax提交方式,因为我要模拟各种类型的数据,基础数据类型.数组.对象等.然而,最终发现了个不同的地方:Form和ajax提交数据,在HttpServletRequest中尽然参数名有所不同. 数据类型 form ajax 基础数据 para=value para=value 数组 para[]={"aaa",

解决部分浏览器ajax提交数据,数据已改变,却后台数据接收数据还是上一次值的问题

最近在工作中遇到了QQ浏览器ajax提交数据,表单数据改变,却后台数据接收数据还是上一次值的问题,但是在其它浏览器中是正常的. 代码如下: $.ajax({ url : "<%=path%>/secretkey/uploadKey", async:false, type : 'post', data : { merKey : $('#merKey').val(), keyType : $('#keyType').val(), type : $('#type').val()

jQuery通过jquery.form.js插件使用AJAX提交Form表单

我简单使用了一下,jQuery Form插件有一下优点:  1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置.5.支持提交多种类型数据.如:xml,json等. 主要的函数: 1.ajaxForm 增加所有需要的事件监听器,为AJAX提交表单做好准备.ajaxForm不能提交表单.在document的ready函数中,使用ajaxForm来为AJAX提交

博客园项目-登录(验证码,ajax提交数据,session和cookie)

前端页面 {% load static %} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content

ajax提交数据,回调函数不执行或总是执行error回调函数的问题

jsp页面: <form id="itemAddForm" class="itemForm" method="post"> <div id="tab1" class="tabcontent"> <div class="form"> <div class="form_row"> <label><b>

ajax提交数据至jsp

ajax技术至今为止 被越来越多的人采用  主要原因也是因为它强大的无刷新功能   给服务器减少了不少压力, 那么究竟什么是ajax? 下面是我的一点心得 首先在eclipse里新建一个项目  这里我的是zy  如图: 我这里是集合mvc和mybatis集成的一个环境,为了节省时间  我就简单了 说一下 有以下几步: 然后创建一个jsp页面  这里是index.jsp    主要是一个form表单    然后是一个juqery函数: 启动服务器   打开浏览器  预览: 其次在创建一个ajax.