> 웹 프론트엔드 > JS 튜토리얼 > jquery 유효성 검사 및 jquery 양식 플러그인 조합은 form_jquery 유효성을 검사한 후 AJAX 제출을 구현합니다.

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

WBOY
풀어 주다: 2016-05-16 15:42:19
원래의
1195명이 탐색했습니다.

양식 유효성 검사를 수행하고 새로 고치지 않고 양식을 제출하려면 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 플러그인 조합을 소개하고 있습니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿