jquery-validateとは何ですか-フロントエンドQ&A-php.cn

jquery-validate はフォーム検証プラグインを指します。jquery に基づいて開発された検証プラグインです。フォームに強力な検証機能を提供し、クライアント側のフォーム検証を容易にします。プラグインURL や電子メール検証を含む一連の便利な検証メソッドをバンドルし、ユーザー定義メソッドを作成するための API を提供します。

jquery-validateとは何ですか

このチュートリアルの動作環境: Windows7 システム、jquery2.2.1&&jquery-validate1.14.0 バージョン、Dell G3 コンピューター。

jquery-validate は、jquery に基づいて開発された検証プラグインであるフォーム検証プラグインを指します。

jQuery Validate プラグインは、フォームの強力な検証機能を提供し、クライアント側のフォーム検証を容易にすると同時に、さまざまなアプリケーションのニーズを満たす多数のカスタマイズオプションを提供します。このプラグインには、URL や電子メール検証などの一連の便利な検証メソッドがバンドルされており、ユーザー定義メソッドを作成するための API が提供されます。バンドルされているすべてのメソッドでは、デフォルトでエラーメッセージに英語が使用されており、他の 37 言語に翻訳されています。

このプラグインは、jQuery チームのメンバー、jQuery UI チームの主任開発者、および QUnit のメンテナである Jörn Zaefferer によって作成および保守されています。このプラグインは 2006 年の jQuery の初期から存在し、それ以来更新され続けています。現在のバージョンは 1.14.0 です。

jQuery Validate 公式 Web サイトにアクセスし、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>

ログイン後にコピー

デフォルトの検証ルール

シリアル番号	ルール	説明
1	required: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	number:true	有効な数値 (負の数、10 進数) を入力する必要があります。
8	digits:true	整数を入力する必要があります。
9	creditcard:	法的なクレジットカード番号を入力する必要があります。
10	equalTo:"#field"	入力値は #field と同じである必要があります。
11	accept:	法的なサフィックス (アップロードされたファイルのサフィックス) を含む文字列を入力します。
12	maxlength:5	最大長 5 の文字列を入力します (中国語の文字は 1 文字としてカウントされます)。
13	minlength:10	最小長 10 の文字列を入力します (中国語の文字は 1 文字としてカウントされます)。
14	rangelength:[5,10]	入力長は 5 ～ 10 である必要があります (中国語の文字は 1 文字としてカウントされます)。
15	range:[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 中国語 Web サイトの他の関連記事を参照してください。