jquery 유효성 검사 및 jquery 양식 플러그인 조합은 form_jquery 유효성을 검사한 후 AJAX 제출을 구현합니다.

양식 유효성 검사를 수행하고 새로 고치지 않고 양식을 제출하려면 jQuery의 두 가지 유용한 플러그인인 jquery verify.js와 jquery form.js를 사용할 수 있습니다. 자세한 내용은 아래에 설명되어 있습니다.

1. jQuery verify.js 직설적으로 말하면 아주 고귀한 분이 우리를 위해 여러 가지 검증서를 작성해 주셨다는 뜻입니다. 매일 피곤해요, 헤헤.

2. jQuery form.js, "이 플러그인을 사용하면 HTML로 제출된 양식을 AJAX 기술을 사용하여 제출된 양식으로 간단히 업그레이드할 수 있습니다. 플러그인의 주요 메소드인 ajaxForm 및 ajaxSubmit은, 양식 제출 프로세스를 처리하는 방법을 결정하기 위해 양식 구성 요소에서 정보를 수집할 수 있습니다. 두 가지 방법 모두 많은 수의 선택적 매개변수를 지원하므로 양식의 데이터 제출을 완벽하게 제어할 수 있습니다. 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>

자바스크립트:

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

그런 다음 부트스트랩 스타일에 맞게 오류 메시지 표시 위치를 수정합니다.

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

오류 메시지 라벨

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

위 내용은 양식 검증 후 AJAX 제출을 구현하기 위한 jquery.validate 및 jquery.form 플러그인 조합을 소개하고 있습니다.