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 相关文章推荐
javascript 伪数组实现方法
Oct 11 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
20个最新的jQuery插件
Jan 13 Javascript
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
纯js实现隔行变色效果
Nov 29 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
jQuery链使用指南
2015/01/20 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
Python学习之asyncore模块用法实例教程
2014/09/29 Python
使用Python生成XML的方法实例
2017/03/21 Python
Python BS4库的安装与使用详解
2018/08/08 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
python脚本第一行如何写
2020/08/30 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
《再见了,亲人》教学反思
2014/02/26 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android