jquery validate和jquery form 插件组合实现验证表单后AJAX提交


Posted in Javascript onAugust 26, 2015

要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件——jquery validate.js 和 jquery form.js.具体详细说明情况下文。

1、jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵。

2、jQuery form.js,“这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单。 插件里面主要的方法, ajaxForm 和 ajaxSubmit, 能够从form组件里采集信息确定如何处理表单的提交过程。两个方法都支持众多的可选参数,能够让你对表单里数据的提交做到完全的控制。这让采用AJAX方式提交一个表单的过程简单的不能再简单了! ”。

下面请看代码示例:

表单:

<form action="@Url.Action("AddColumns","Content")" method="post" id="AddColumnsForm">
 <div class="form-group js-EditCol" id="AddName">
 <label class="control-label">名称</label>
 <input name="Name" class="form-control" required />
 </div>
 <div class="form-group js-EditCol" id="AddRemark">
 <label class="control-label">备注</label>
 <input name="Remark" class="form-control" />
 </div>
 <div class="form-group js-EditCol" id="AddColumnTypeId">
 <label class="control-label">类型</label>
 <select class="form-control" name="ColumnTypeId" id="AddColumnTypeIdSel" required>
 </select>//下拉列表空置验证之要项目的Value值是空的就认为是空值
 </div> 
 <input type="submit" class="btn btn-primary" value="新增栏目" />
 <input type="reset" class="btn btn-default" value="清空" />
</form>

javascript:

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 submitHandler: function(form) {
  $(form).ajaxSubmit();
 }
 });
});

后面再加强一下

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 submitHandler: function(form) {
  $(form).ajaxSubmit({
  success: function (result) { //表单提交后更新页面显示的数据
   $('#TreeTable').treegrid('reload');
   var d = result.split(';');
   ShowMsg(d[0], d[1], d[2]);
  }
  });
 }
 });
});

 然后在修改下错误信息显示位置,符合bootstrap样式

$(document).ready(function () {
 $("#AddColumnsForm").validate({
 errorPlacement: function (error, element) {//自定义错误信息显示操作,element是出错的input控件,error可以认为是是包含

错误信息的label标签

element.next('span.help-block').remove();
  element.after('<span class="help-block">' + error.text() + '</span>');
  element.parent().addClass("has-error");
 },submitHandler: function(form) {
  $(form).ajaxSubmit({
  success: function (result) {
   $('#TreeTable').treegrid('reload');
   var d = result.split(';');
   ShowMsg(d[0], d[1], d[2]);
  }
  });
 }
 });

以上内容介绍了jquery.validate和jquery.form 插件组合实现验证表单后AJAX提交 ,本文写的不好还请见谅,谢谢。

Javascript 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
微信小程序实现日历效果
Dec 28 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 #Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 #Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 #Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 #Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 #Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 #Javascript
js鼠标点击图片切换效果代码分享
Aug 26 #Javascript
You might like
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python遍历文件夹下所有excel文件
2018/01/03 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
Python中return self的用法详解
2018/07/27 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
对python中UDP,socket的使用详解
2019/08/22 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
《母亲的恩情》教学反思
2014/02/13 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
感谢信的格式
2015/01/21 职场文书
力克胡哲观后感
2015/06/10 职场文书
商业计划书范文
2019/04/24 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL