jQuery validateプラグインの詳細説明

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(){
$(&#39;#demoForm&#39;).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:&#39;此项必填&#39;,
minlength:&#39;用户名最小是6位&#39;,
maxlength:&#39;用户名最大是9位&#39;
},
password:{
required:&#39;此项必填&#39;,
minlength:&#39;密码最小是6位&#39;,
maxlength:&#39;密码最大是9位&#39;
},
age:{
min:&#39;最小18岁&#39;,
max:&#39;最大80岁&#39;,
//range:&#39;年龄必须是18-80之间&#39;,
//                          rangelength:&#39;2-3位数&#39;,
digits:&#39;年龄必须是正整数&#39;
},
date:{
required:&#39;必填&#39;,
dateISO:&#39;日期格式不合法&#39;
}
}
})
})
</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: 要素の検証ルールを返します。

メッセージ コントロールにメッセージがない場合、デフォルトのメッセージは次のようになります。

デフォルトの検証ルール:

1required:true必須フィールド。 2remote:"check.php"ajaxメソッドを使用してcheck.phpを呼び出し、入力値を確認します。 3email:true正しい形式の電子メールを入力する必要があります。 4url:true URL は正しい形式で入力する必要があります。 5date:true日付は正しい形式で入力する必要があります。日付検証 ie6 エラー。注意して使用してください。 6dateISO:true日付 (ISO) を正しい形式で入力する必要があります (例: 2009-06-23、1998/01/22)。形式のみが検証され、有効性は検証されません。 7number:true有効な数値 (負の数、10 進数) を入力する必要があります。 8数字:true整数を入力する必要があります。 9クレジットカード:有効なクレジットカード番号を入力する必要があります。 10equalTo:"#field" 入力値は #field と同じである必要があります。 11accept: 有効なサフィックス (アップロードされたファイルのサフィックス) を含む文字列を入力します。 12maxlength:5最大長5の文字列を入力してください(漢字は1文字として数えます)。 13minlength:10 最小長が 10 の文字列を入力してください (漢字は 1 文字としてカウントされます)。 14rangelength:[5,10] 入力長は 5 ～ 10 である必要があります (中国語の文字は 1 文字としてカウントされます)。 15range:[5,10] 入力値は 5 ～ 10 である必要があります。 16max:5入力値は5を超えることはできません。 17min:10 入力値は 10 未満にすることはできません。

以上がjQuery validateプラグインの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。