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

前端技术 2023/08/31 JavaScript

要实现表单验证和无刷新提交表单我们可以使用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提交 ，本文写的不好还请见谅，谢谢。

本文地址：https://www.stayed.cn/item/894

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案