Gabungan pemalam borang pengesahan jquery dan jquery melaksanakan penyerahan AJAX selepas mengesahkan form_jquery

Untuk mencapai pengesahan borang dan menyerahkan borang tanpa memuat semula, kami boleh menggunakan dua pemalam berguna jQuery - jquery validate.js dan jquery form.js Butiran diterangkan di bawah.

1. jQuery validate.js Secara terang-terangan, ini bermakna seorang yang sangat mulia telah menulis pengesahan pelbagai bentuk untuk kita penat setiap hari, hehe.

2. jQuery form.js, "Pemalam ini membolehkan anda hanya menaik taraf borang yang diserahkan dalam HTML kepada borang yang diserahkan menggunakan teknologi AJAX. Kaedah utama dalam pemalam, ajaxForm dan ajaxSubmit, Maklumat boleh dikumpul daripada komponen borang untuk menentukan cara mengendalikan proses penyerahan borang. Kedua-dua kaedah menyokong sejumlah besar parameter pilihan, membolehkan anda mempunyai kawalan sepenuhnya ke atas penyerahan data dalam borang menggunakan AJAX Proses ini tidak boleh menjadi lebih mudah!"

Sila lihat contoh kod di bawah:

Borang:

<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();
 }
 });
});

Nanti saya kuatkan

$(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]);
  }
  });
 }
 });
});

Kemudian ubah suai kedudukan paparan mesej ralat untuk mematuhi gaya bootstrap

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

Label mesej ralat

  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]);
  }
  });
 }
 });

Kandungan di atas memperkenalkan gabungan pemalam jquery.validate dan jquery.form untuk melaksanakan penyerahan AJAX selepas mengesahkan borang Harap maafkan saya atas penulisan artikel ini yang kurang baik, terima kasih.