Jquery-validate 란 무엇입니까?

jquery-validate는 양식 검증 플러그인을 의미합니다. 이는 jquery를 기반으로 개발된 검증 플러그인으로, 양식에 대한 강력한 검증 기능을 제공하고 플러그인 번들을 더욱 쉽게 만듭니다. URL 및 이메일 확인을 포함한 유용한 검증 방법을 제공하는 동시에 사용자 정의 방법을 작성하기 위한 API를 제공합니다.

이 튜토리얼의 운영 환경: windows7 시스템, jquery2.2.1&&jquery-validate1.14.0 버전, Dell G3 컴퓨터.

jquery-validate는 jquery를 기반으로 개발된 검증 플러그인인 Form Validate 플러그인을 말합니다.

jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만드는 동시에 다양한 애플리케이션 요구 사항을 충족할 수 있는 다양한 사용자 정의 옵션을 제공합니다. 플러그인은 URL 및 이메일 검증을 포함한 유용한 검증 방법 세트를 번들로 제공하고 사용자 정의 방법을 작성하기 위한 API를 제공합니다. 번들로 제공되는 모든 메서드는 기본적으로 오류 메시지에 영어를 사용하며 37개 다른 언어로 번역되었습니다.

이 플러그인은 jQuery 팀의 구성원이자 jQuery UI 팀의 수석 개발자이자 QUnit의 관리자인 Jörn Zaefferer가 작성하고 유지 관리합니다. 이 플러그인은 2006년 jQuery 초창기부터 사용되어 왔으며 그 이후로 계속 업데이트되었습니다. 현재 버전은 1.14.0입니다.

jQuery Validate 공식 웹사이트를 방문하여 최신 버전의 jQuery Validate 플러그인을 다운로드하세요.

1.14.0 버전 다운로드 주소: http://libs.cdnjs.net/jquery-validate/1.14.0/

JS 라이브러리 가져오기

<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow"  rel="external nofollow" ></script>

기본 확인 규칙

일련번호	Rule	Description
1	필수:true	입력해야 하는 필드입니다.
2	remote:"check.php"	ajax 메서드를 사용하여 check.php를 호출하여 입력 값을 확인합니다.
3	email:true	올바른 형식의 이메일을 입력해야 합니다.
4	url:true	URL을 올바른 형식으로 입력해야 합니다.
5	date:true	날짜는 올바른 형식으로 입력해야 합니다. 날짜 확인(ie6 오류), 주의해서 사용하세요.
6	dateISO:true	날짜(ISO)를 올바른 형식으로 입력해야 합니다(예: 2009-06-23, 1998/01/22). 유효성은 확인되지 않고 형식만 확인됩니다.
7	숫자:true	적법한 숫자(음수, 소수)를 입력해야 합니다.
8	digits:true	정수를 입력해야 합니다.
9	신용카드:	적법한 신용카드 번호를 입력해야 합니다.
10	equalTo:"#field"	입력 값은 #field와 동일해야 합니다.
11	accept:	법적 접미사(업로드된 파일의 접미사)가 포함된 문자열을 입력하세요.
12	최대 길이:5	최대 길이가 5자(한자는 1자로 계산)의 문자열을 입력하세요.
13	minlength:10	최소 10자 이상의 문자열을 입력하세요(한자는 1자로 계산됩니다).
14	rangelength:[5,10]	입력 길이는 5~10자 사이여야 합니다(한자는 1자로 계산됩니다).
15	범위:[5,10]	입력 값은 5에서 10 사이여야 합니다.
16	max:5	입력 값은 5보다 클 수 없습니다.
17	min:10	입력값은 10보다 작을 수 없습니다.

默认提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

jQuery Validate提供了中文信息提示包，位于下载包的 /localization/messages_zh.js，内容如下：

(function( factory ) {
    if ( typeof define === "function" && define.amd ) {
        define( ["jquery", "../jquery.validate"], factory );
    } else {
        factory( jQuery );
    }
}(function( $ ) {
/*
 * Translated default messages for the jQuery validation plugin.
 * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
 */
$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});
}));

你可以将该本地化信息文件 /localization/messages_zh.js 引入到页面：

<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow"  rel="external nofollow" ></script>

使用方式

1、将校验规则写到控件中

<script src="http://libs.cdnjs.net/jquery/2.2.1/jquery.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/jquery.validate.min.js" rel="external nofollow"  rel="external nofollow" ></script>
<script src="http://libs.cdnjs.net/jquery-validate/1.14.0/localization/messages_zh.js" rel="external nofollow"  rel="external nofollow" ></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

  

    
输入您的名字，邮箱，URL，备注。
    

      Name (必需, 最小两个字母)
      
    
    

      E-Mail (必需)
      
    
    

      URL (可选)
      
    
    

      备注 (必需)
      
    
    

      
    
  

2、将校验规则写到 js 代码中

$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
  $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受我们的声明",
      topic: "请选择两个主题"
     }
    })
});

messages 处，如果某个控件没有 message，将调用默认的信息

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>验证完整的表单</legend>
    <p>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">用户名</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">密码</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">验证密码</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">请同意我们的声明</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">我乐意接收新信息</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you&#39;d like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="提交">
    </p>
  </fieldset>
</form>

说明：

• required: true 值是必须的。

• required: "#aa:checked" 表达式的值为真，则需要验证。

• required: function(){} 返回为真，表示需要验证。

后边两种常用于，表单中需要同时填或不填的元素。

常用方法及注意问题

1、用其他方式替代默认的 SUBMIT

$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

使用 ajax 方式

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

可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({
  submitHandler: function(form) { alert("提交事件!");form.submit(); }
});

如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

2、debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便。

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

如果一个页面中有多个表单都想设置成为 debug，则使用：

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

3、ignore：忽略某些元素不验证

ignore: ".ignore"

4、更改错误信息显示的位置

errorPlacement：Callback

指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。

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

【推荐学习：jQuery视频教程、web前端视频】

위 내용은 Jquery-validate 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!