Die Kombination aus jQuery-Validierung und JQuery-Formular-Plugin implementiert die AJAX-Übermittlung nach der Validierung von form_jquery

Um eine Formularvalidierung zu erreichen und das Formular ohne Aktualisierung zu senden, können wir zwei nützliche Plug-Ins von jQuery verwenden – jquery validate.js und jquery form.js. Die Details werden unten erläutert.

1. jQuery validate.js Um es ganz klar auszudrücken: Das ist eine sehr edle Person, die die Überprüfung verschiedener Formulare für uns geschrieben hat jeden Tag anstrengend, hehe.

2. jQuery form.js, „Mit diesem Plug-in können Sie in HTML übermittelte Formulare einfach auf mithilfe der AJAX-Technologie übermittelte Formulare aktualisieren. Die Hauptmethoden im Plug-in, ajaxForm und ajaxSubmit, Von der Formularkomponente können Informationen gesammelt werden, um zu bestimmen, wie der Formularübermittlungsprozess abgewickelt werden soll. Beide Methoden unterstützen eine große Anzahl optionaler Parameter, sodass Sie die vollständige Kontrolle über die Übermittlung von Daten im Formular haben mit AJAX. Der Prozess könnte nicht einfacher sein!“

Bitte sehen Sie sich das Codebeispiel unten an:

Formular:

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

Ich werde es später verstärken

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

Ändern Sie dann die Anzeigeposition der Fehlermeldung, um sie an den Bootstrap-Stil anzupassen

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

Die Bezeichnung der Fehlermeldung

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

Der obige Inhalt stellt die Plug-in-Kombination jquery.validate und jquery.form vor, um die AJAX-Übermittlung nach der Überprüfung des Formulars zu implementieren. Bitte verzeihen Sie mir die schlechte Schreibweise dieses Artikels, vielen Dank.