jQuery 유효성 검사 플러그인 유효성 검사 사용 가이드_jquery

웹사이트 개발 과정에서 사용자가 입력한 정보가 요구 사항을 충족하는지 확인해야 하는 경우가 있으므로 사용자가 제출한 데이터를 확인합니다. 확인은 클라이언트 측에서 한 번, 서버 측에서 한 번, 총 두 번 수행됩니다. 클라이언트 측 확인은 사용자 경험을 향상시킬 수 있습니다.

jquery 유효성 검사 플러그인이 많이 있으며 기본적으로 동일한 기능을 구현합니다. 이번 글에서는 jquery 유효성 검사 플러그인 중 하나인 jquery.validate

만을 소개합니다.

jquery.Validation은 클라이언트 양식의 유효성을 검사할 수 있고 확장성이 뛰어난 다양한 사용자 정의 가능한 속성과 메서드를 제공하는 탁월한 jquery 플러그인입니다.

1.jquery.validate 플러그인 기능

손쉽게 고객정보 검증 구현 및 요구사항에 부합하지 않는 정보 필터링

2.jquery.validate 공식 주소

공식 주소: http://jqueryvalidation.org/, 자세한 플러그인 사용 지침

공식 데모: http://jquery.bassistance.de/validate/demo/

3. jquery.validate 사용 방법

1. js 인용

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

2.css 스타일, 사용자 정의 가능, 간단히 오류 스타일 추가 또는 공식 데모에서 스타일 사용.

.error{
  color:red;
  margin-left:8px;
}

3.js 코드

$(document).ready(function() {
  // validate signup form on keyup and submit
  var validator = $("#signupform").validate({
    rules: {
      firstname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      password_confirm: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true,
      },
      dateformat: "required",
      terms: "required"
    },
    messages: {
      firstname: "姓名不能为空",
      username: {
        required: "用户名不能为空",
        minlength: jQuery.format("用户名只少由 {0} 字符组成")
      },
      password: {
        required: "密码不能为空",
        minlength: jQuery.format("密码只少由 {0} 字符组成")
      },
      password_confirm: {
        required: "确认密码不能为空",
        minlength: jQuery.format("确认密码只少由 {0} 字符组成"),
        equalTo: "秘密与确认密码不一致"
      },
      email: {
        required: "邮箱不能为空",
        email: "邮箱格式不正确"
      },
      dateformat: "请选择性别",
      terms: " "
    },
    // the errorPlacement has to take the table layout into account
    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());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
      alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
      // set   as text for IE
      label.html(" ").addClass("checked");
    },
    highlight: function(element, errorClass) {
      $(element).parent().next().find("." + errorClass).removeClass("checked");
    }
  });
});

위 코드는 플러그인에서 제공하는 속성과 메서드만 사용합니다. 확인 방법을 사용자 정의할 수도 있습니다.

등

$.validator.addMethod("checkUserName", function(value) {

    //value为验证的值，对应于元素id

  //方法代码

}, '用户名格式不正确');

사용자 정의 방법을 사용하는 것도 매우 간단합니다. 요소 ID: "checkUserName"

4. HTML 사용

<form id="signupform" autocomplete="off" method="get" action="">
   <table>
   <tr>
    <td class="label"><label id="lfirstname" for="firstname">姓名</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lusername" for="username">用户名</label></td>
    <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword" for="password">密码</label></td>
    <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>
    <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lemail" for="email">邮箱</label></td>
    <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
    <td class="status"></td>
   </tr>
         <tr>
    <td class="label"><label>性别</label></td>
    <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
    <table>
    <tbody>

    <tr>
      <td style="padding-right: 5px;">
        <input id="sex_men" name="dateformat" type="radio" value="0" />
        <label id="lbl_sex_men" for="dateformat_eu">男</label>
      </td>
      <td style="padding-left: 5px;">
        <input id="sex_women" name="dateformat" type="radio" value="1" />
        <label id="lbl_sex_women" for="dateformat_am">女</label>
      </td>
      <td>
      </td>
    </tr>
    </tbody>
    </table>
    </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">以阅读并同意网站条款.</label>
      </div> <!-- /termswrap -->
    </td>
   </tr>
   <tr>
    <td class="label"></td>
    <td class="field" colspan="2">
    <input id="signupsubmit" name="signup" type="submit" value="注册" />
    </td>
   </tr>

   </table>
</form>

더 많은 검증 방법 적용을 보려면 http://jqueryvalidation.org/

를 참조하세요.