1. Validate プラグインの説明
Validate は、jQuery に基づいた軽量の検証プラグインであり、豊富な組み込みの検証ルールと柔軟なカスタム ルール インターフェイスを備えており、HTML、CSS、および JS 間の結合を自由に行うことができます。レイアウトと豊富なスタイルは、入力、選択、テキストエリアの検証をサポートします。
2. 設定方法
最初にJqueryライブラリをインポートし、次にValidateプラグインをインポートする必要があります。そして、2 つのプラグインには特定の順序があります。 (jquery ライブラリ - Validate プラグイン)
<script type="text/javascript" src="js/jquery-1.9.1.js?1.1.10" ></script> <script type="text/javascript" src="js/jquery.validate.min.js?1.1.10" ></script>
js コードは次のとおりです:
<script type="text/javascript"> $(function(){ $('#demoForm').validate({ rules:{ //指的是input 的 name的名字 username:{ required:true, minlength:6, maxlength:9 }, password:{ required:true, minlength:6, maxlength:9 }, age:{ min:18, max:80, //range:[18,80], //r angelength:[2,3], digits:true }, date:{ required:true, dateISO:true, } }, messages:{ username:{ required:'此项必填', minlength:'用户名最小是6位', maxlength:'用户名最大是9位' }, password:{ required:'此项必填', minlength:'密码最小是6位', maxlength:'密码最大是9位' }, age:{ min:'最小18岁', max:'最大80岁', //range:'年龄必须是18-80之间', // rangelength:'2-3位数', digits:'年龄必须是正整数' }, date:{ required:'必填', dateISO:'日期格式不合法' } } }) }) </script>
html コードは次のとおりです:
<form id="demoForm"> <p> <label for="user">username</label> <input type="text" name="username" id="user"/> </p> <p> <label for="pass">password</label> <input type="text" name="password" id="pass"/> </p> <p> <label for="age">age</label> <input type="text" name="age" id="age"/> </p> <p> <label for="date">date</label> <input type="text" name="date" id="date"/> </p> <p> <input type="submit" value="提交" id="btn"/> </p> </form>
コードの説明:
$('#demoForm').validate({}) validate を呼び出すフォーム要素
rules: 要素の検証ルールを返します。
メッセージ コントロールにメッセージがない場合、デフォルトのメッセージは次のようになります。
デフォルトの検証ルール:
必須フィールド。 | 2 | |
ajaxメソッドを使用してcheck.phpを呼び出し、入力値を確認します。 | 3 | |
正しい形式の電子メールを入力する必要があります。 | 4 | |
URL は正しい形式で入力する必要があります。 | 5 | |
日付は正しい形式で入力する必要があります。日付検証 ie6 エラー。注意して使用してください。 | 6 | |
日付 (ISO) を正しい形式で入力する必要があります (例: 2009-06-23、1998/01/22)。形式のみが検証され、有効性は検証されません。 | 7 | |
有効な数値 (負の数、10 進数) を入力する必要があります。 | 8 | |
整数を入力する必要があります。 | 9 | |
有効なクレジットカード番号を入力する必要があります。 | 10 | |
入力値は #field と同じである必要があります。 | 11 | |
有効なサフィックス (アップロードされたファイルのサフィックス) を含む文字列を入力します。 | 12 | |
最大長5の文字列を入力してください(漢字は1文字として数えます)。 | 13 | |
最小長が 10 の文字列を入力してください (漢字は 1 文字としてカウントされます)。 | 14 | |
入力長は 5 ~ 10 である必要があります (中国語の文字は 1 文字としてカウントされます)。 | 15 | |
入力値は 5 ~ 10 である必要があります。 | 16 | |
入力値は5を超えることはできません。 | 17 | |
入力値は 10 未満にすることはできません。 |
以上がjQuery validateプラグインの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。