jQuery 유효성 검사 양식에 대한 심층 연구 검증

이전 글에서는 jQuery Validate 양식 유효성 검사에 대한 기본 지식을 소개했습니다. 자세한 내용은 "JQuery Validate 양식 유효성 검사 시작하기 학습", 을 참조하세요. 오늘의 이 기사에서는 jQuery Validate 양식 유효성 검사에 대한 심층적인 연구를 제공합니다. 다음은 기사의 전체 내용입니다.

1. 다른 방법을 사용하여 기본 SUBMIT을 대체하세요

$().ready(function() {
 $("#signupForm").validate({
    submitHandler:function(form){
      alert("submitted");  
      form.submit();
    }  
  });
});

로그인 후 복사

Ajax 방식 사용

 $(".selector").validate({   
 submitHandler: function(form) 
  {   
   $(form).ajaxSubmit();   
  } 
 })

로그인 후 복사

validate의 기본값을 다음과 같이 설정할 수 있습니다.

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

로그인 후 복사

양식을 제출하려면 $(form).submit() 대신 form.submit()을 사용해야 합니다.
2. 디버그, 확인만 하고 양식을 제출하지 않음
이 매개변수가 true이면 양식이 제출되지 않고 확인만 이루어지므로 디버깅에 매우 편리합니다.

$().ready(function() {
 $("#signupForm").validate({
    debug:true
  });
});

로그인 후 복사

페이지에 여러 양식이 있고 디버그하도록 설정하려면 다음을 사용하세요.

$.validator.setDefaults({
  debug: true
})

로그인 후 복사

3. 무시: 특정 요소를 무시하고 확인하지 않습니다
무시: ".ignore"
4. 오류 메시지 표시 위치 변경
errorPlacement: 콜백
오류가 발생한 위치를 나타냅니다. 기본값은 error.appendTo(element.parent())입니다. 즉, 오류 메시지는 확인된 요소 뒤에 배치됩니다.

errorPlacement: function(error, element) { 
  error.appendTo(element.parent()); 
}

로그인 후 복사

예

<tr>
  <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
  <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
  <td class="status"></td>
</tr>
<tr>
  <td style="padding-right: 5px;">
    <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
    <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
  </td>
  <td style="padding-left: 5px;">
    <input id="dateformat_am" name="dateformat" type="radio" value="1" />
    <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
  </td>
  <td></td>
</tr>
<tr>
  <td class="label"> </td>
  <td class="field" colspan="2">
    <div id="termswrap">
      <input id="terms" type="checkbox" name="terms" />
      <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
    </div>
  </td>
</tr>

errorPlacement: function(error, element) {
  if ( element.is(":radio") )
    error.appendTo( element.parent().next().next() );
  else if ( element.is(":checkbox") )
    error.appendTo ( element.next() );
  else
    error.appendTo( element.parent().next() );
}

로그인 후 복사

코드의 기능은 다음과 같습니다. 일반적으로 라디오인 경우 오류 메시지가 에 표시됩니다. 에 표시되며, 체크박스인 경우 콘텐츠 뒤에 표시됩니다.
매개변수 유형 설명 기본값
errorClass 문자열은 오류 프롬프트의 CSS 클래스 이름을 지정하며 오류 프롬프트의 스타일을 사용자 정의할 수 있습니다. "오류"
errorElement 문자열 오류를 표시하는 데 사용되는 레이블은 무엇입니까? 기본값은 레이블이며 em으로 변경할 수 있습니다. "라벨"
errorContainer Selector는 오류 메시지가 나타날 때 표시할 컨테이너 속성을 자동으로 변경하고 오류가 없을 때 숨길 수 있습니다.
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector는 오류 정보를 컨테이너에 넣습니다.
래퍼 문자열 위의 errorELement를 래핑하는 데 사용해야 하는 레이블입니다.
일반적으로 이 세 가지 속성을 동시에 사용하여 컨테이너에 모든 오류 프롬프트를 표시하고 정보가 없을 때 자동으로 숨기는 기능을 구현합니다.
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
래퍼: "li"
5. 오류 메시지 표시 스타일 변경
오류 프롬프트 스타일을 설정하고 아이콘 표시를 추가합니다. 유효성 검사 파일의 스타일을 유지하기 위해 특별히 이 시스템에 유효성 검사.css가 생성되었습니다.

input.error { border: 1px solid red; }
label.error {
 background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;

 padding-left: 16px;

 padding-bottom: 2px;

 font-weight: bold;

 color: #EA5200;
}
label.checked {
 background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}

로그인 후 복사

6. 각 필드는 실행 기능을 통해 검증됩니다
성공: 문자열,콜백
검증할 요소 이후의 작업은 검증을 통과합니다. 뒤에 문자열이 오면 CSS 클래스로 처리되거나 함수가 뒤따를 수 있습니다.

success: function(label) {
  // set   as text for IE
  label.html(" ").addClass("checked");
  //label.addClass("valid").text("Ok!")
}

로그인 후 복사

CSS 에 정의된 스타일을 사용하여 유효성 검사 요소에 "valid"를 추가합니다.
성공: "유효함"
7. 인증 발동 방식 수정
다음은 불리언 타입이지만, false로 변경하려는 경우가 아니라면 임의로 추가하지 않는 것이 좋습니다.
트리거 방식 유형 설명 기본값
onsubmit 부울 제출 시 검증되었습니다. 다른 방법을 사용하여 확인하려면 false로 설정하세요. 사실
onfocusout Boolean 포커스가 손실되었을 때 유효성을 검사합니다(체크박스/라디오 버튼 제외). 사실
onkeyup 부울 키업 중에 검증됩니다. 사실
onclick Boolean 확인란과 라디오 버튼을 클릭할 때 유효성을 검사합니다. 사실
focusInvalid Boolean 양식이 제출된 후 유효성 검사에 실패한 양식(제출 전에 포커스를 받은 첫 번째 또는 실패한 유효성 검사 양식)에 포커스가 부여됩니다. 사실
focusCleanup Boolean true인 경우 유효성 검사에 실패한 요소가 포커스를 얻을 때 오류 메시지를 제거합니다. focusInvalid와 함께 사용하지 마세요. 거짓

// 重置表单
$().ready(function() {
 var validator = $("#signupForm").validate({
    submitHandler:function(form){
      alert("submitted");  
      form.submit();
    }  
  });
  $("#reset").click(function() {
    validator.resetForm();
  });

});

로그인 후 복사

8.비동기 검증
원격: URL
확인을 위해 ajax를 사용하세요. 기본적으로 현재 확인된 값이 원격 주소로 제출됩니다. 다른 값을 제출해야 하는 경우 data 옵션을 사용할 수 있습니다.

remote: "check-email.php"
remote: {
  url: "check-email.php",   //后台处理程序
  type: "post",        //数据发送方式
  dataType: "json",      //接受数据格式  
  data: {           //要传递的数据
    username: function() {
      return $("#username").val();
    }
  }
}

로그인 후 복사

远程地址只能输出 "true" 或 "false"，不能有其他输出。
9、添加自定义校验
addMethod：name, method, message
自定义验证方法

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
  var length = value.length;
  for(var i = 0; i < value.length; i++){
    if(value.charCodeAt(i) > 127){
      length++;
    }
  }
 return this.optional(element) || ( length >= param[0] && length <= param[1] );  
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));

// 邮政编码验证  
jQuery.validator.addMethod("isZipCode", function(value, element) {  
  var tel = /^[0-9]{6}$/;
  return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

로그인 후 복사

注意：要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。
注意：在 messages_cn.js 文件中添加：isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。
10、radio 和 checkbox、select 的验证
radio 的 required 表示必须选中一个。

<input type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input type="radio" id="gender_female" value="f" name="gender"/>
checkbox 的 required 表示必须选中。
<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />
checkbox 的 minlength 表示必须选中的最小个数，maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, minlength:2}" />
<input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
<input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />
select 的 required 表示选中的 value 不能为空。
<select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
  <option value=""></option>
  <option value="1">Buga</option>
  <option value="2">Baga</option>
  <option value="3">Oi</option>
</select>
select 的 minlength 表示选中的最小个数（可多选的 select），maxlength 表示最大的选中个数，rangelength:[2,3] 表示选中个数区间。
<select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
  <option value="b">Banana</option>
  <option value="a">Apple</option>
  <option value="p">Peach</option>
  <option value="t">Turtle</option>
</select>

로그인 후 복사

附表：内置验证方式：