jQuery Form Validation Plugin フォーム 検証 プラグイン 簡単 使い方
jQuery義 validation(検証) プラグイン載せる. 一応 デモ ページから 見れば どうな 浮かし 卵 数 ある のだ.
使い方は 事実 デモ ページ 掻いて来て 名前だけ 直す 位でも 卵 数 ある でしょうに, 何 枝 使って 見よう.
二 枝 方法で 使う 数 ある. 始めて 番目は シンプルな 方法だ.
始めて 番目 方法
これ 方法は 上 デモ ページで 上側に ある 例示に 使われた 方法だ.
△これ 始めて 番目 方法は javascript コードが 簡単だという 長所が ある 一方, メッセージが 英語で 出て, html コードに 入って行く 蟹 多くなるという 短所が ある. 秘漂与えた オトリビュトが 使われるという 粘度 短所だ.
$(function(){
// submit させた 時 #formを 検証します.
$("#form").validate();
});
javascript コードには 上と 一緒に 使って(勿論 jquery.jsを 上 コード 前に 呼び出すと する 件 当然だ.) htmlには こんなに 書く のだ.
<form id="form" method="get" action=""> <fieldset> <legend>寝る 少なくて ください</legend> <p> <label for="cname">名前 (必須, 最小 2字)</label> <input id="cname" name="name" class="required" minlength="2" /> <p> <label for="cemail">E-Mail (必須)</label> <input id="cemail" name="email" class="required email" /> </p> <p> <label for="curl">URL (選択)</label> <input id="curl" name="url" class="url" value="" /> </p> <p> <label for="ccomment">残す お話 (必須)</label> <textarea id="ccomment" name="comment" class="required"></textarea> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
上 コードで ボール 数 ある ように, htmlコードに 少なくて 与えれば なる. 整理すれば 次と ようだ.
- 必須要素である 場合
class="required"と 使う. あるいはrequired="required"と書く. HTML5の文法だが、このプラグインが自動的に処理します. - email 検証を すると する 場合
class="email"と 使う. - 必須ながら 電子メール 検証を すると する 場合には 復讐 クラス 兵器する 方法を よって
class="required email"と 少なければ なって 残りも 同じだ. - 最小 字詰めが ある 場合
minlength="数字"形態で 少ない.
上と ような 方法で した 時の 最大 短所は メッセージが 英語で 出るという 点だ. 必須 要素なのに 中 少ない 場合 ‘This field is required.’という メッセージが 浮かぶ. メッセージを 韓国語で して たければ 二 番目 方法を 使うとか 私が 作った 韓国語 拡張 ファイルを 使用すれば なる. 韓国語 拡張の コードは 下と ようだ.
/*
* Translated default messages for the jQuery validation plugin.
* Locale: KO
* Filename: messages_ko.js
*/
jQuery.extend(jQuery.validator.messages, {
required: "必ず 入力すると します.",
remote: "修正 望みます.",
email: "電子メール 住所を 正しく 入力してください.",
url: "URLを 正しく 入力してください.",
date: "日付が 過ち 入力されました.",
dateISO: "ISO 形式に 当たる 日付で 入力してください.",
number: "数字だけ 入力してください.",
digits: "数字(digits)万 入力してください.",
creditcard: "正しい クレジットカード 番号を 入力してください.",
equalTo: "値段が お互いに 違います.",
accept: "承諾して ください.",
maxlength: jQuery.validator.format("{0}字 以上は 入力する 数 ないです."),
minlength: jQuery.validator.format("少なくても {0}字は 入力すると します."),
rangelength: jQuery.validator.format("{0}字 以上 {1}字 以下で 入力して ください."),
range: jQuery.validator.format("{0}で {1} 間の 値段を 入力してください."),
max: jQuery.validator.format("{0} 以下で 入力して ください."),
min: jQuery.validator.format("{0} 以上に 入力して ください.")
});
違う 短所も ある. minlength という オトリビュトは ウェブ標準 検証期を パスするの できない. 標準 点数を カックアモックを 数 あるという のだ. それが 使用性より 重要な 要素は ないが, ウェブを 寝る 分からない 上官たちには 重要だろうか 分からない.
二 番目 方法
これ 方法は あらゆる 要素を javascript 団で 処理すること だから 仮装(家長) こぎれいな コードを 生産する 数 ある.
一応 コードを 見よう.
$(function(){
// validate signup form on keyup and submit
$("#signupForm").validate({
rules: {
name: "required",
password: {
required: true,
minlength: 8
},
confirm_password: {
required: true,
minlength: 8,
equalTo: "#password"
},
email: {
required: true,
email: true
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required"
},
messages: {
name: "名前を 入力して ください",
password: {
required: "暗号を 入力して ください",
minlength: "暗号は 8定木 以上だと します."
},
confirm_password: {
required: "暗号を たいてい 番(回) もっと 入力して ください",
minlength: "暗号は 8定木 以上だと します.",
equalTo: "暗号が 一致するの ないです."
},
email: "形式に 当たる 電子メールを 入力して ください.",
agree: "政策 同意に チェックして ください"
}
});
});
上で 目を注いで ボール 点は validate 中に 入っている {} 内側 部分だ. ここ オプションが 入って行く.
これ オプション 中 核心的に 使われた のである rules オプションだ.
rules: {オプションオブジェクト}
こういう 形式で 使われる. オプション オブジェクトは どうに 構成されるのか 見よう.
{name: "required"}
こんなに スィである 蟹 ある. これは nameこれ “name”イン 奴は 必須という 意味だ. 違う 方式で 適用する 首都 あるのに たいてい input(あるいは textarea)に 色々 犬の オプションを ガール 焚く.
email: {required: true, email: true}
こういう 式で 入って行くのに, これ 時 email: true 項目は 当然 電子メール形式 検証を するという 意味だ.
rules オプション 下側に ある message オプションは rulesに 対応される メッセージたちを 書いてくれれば なる. 上 形式を 参考すれば なる のなので 敢えて いちいち 説明するの ないだろう.
次 html コードを 見よう.
<form id="signupForm" method="get" action="">
<fieldset>
<legend>情報を 入力して ください</legend>
<p>
<label for="name">Lastname</label>
<input id="name" name="name" />
</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" />
</p>
<p>
<label for="agree">個人情報 保護政策 同意</label>
<input type="checkbox" class="checkbox" id="agree" name="agree" />
</p>
<p>
<input class="submit" type="submit" value="提出"/>
</p>
</fieldset>
</form>
上 コードは html 検証を パスする 数 ある こぎれいな コードだ. labelに ある for オトリビュト増えた ウェブ標準に 当たる オトリビュトだ. これ ラベルが どうな インプットに 大韓 のか, 該当 インプットの idを 使って 与える 部分だ.
しかし jQuery 検証 プラグインの ジャバスクリプト コードで 上 フォームを 認識する 焚く name オトリビュトを 基準で する のなので, nameを 気を使えば なる. すなわち, label銀 選択だから あまり 目 帰るの なくても なるという 言葉だ.
nameを 土台で するので checkbox私 radio ような のも 検証が 可能に なる.
必須だ! する メッセージの スタイル
定木, それでは required と 書いてくれた inputに 入力を 中 して submit ボタンを 押した 時(これ 場合を ‘エラーが 出た 時’と 表現しよう.) 出る スタイルは どこで 決めようか?
それは 別に 書いてくれると する. あらかじめ 用意した css増えた 提供して あるの ない ようだ.
使われる ページの head 部分に 下のように 使って 与えれば なる.
二 場合を 提供する. 始めて 番目 のは メッセージが input義 右側に 出る デザインだ. 二 番目 のは メッセージが input義 下端に 出る デザインだ. ふたつ だ input義 わくが 赤い 点線で 変わって, メッセージも 赤い 色で 浮かぶ. css 知識が 少しだけ あったら 修正して 自分が 願い次第に 使う 数 ある のだ.
<style type="text/css">
input.error, textarea.error{
border:1px dashed red;
}
label.error{
margin-left:10px;
color:red;
}
</style>
上 スタイルが エラーメッセージを input 右側 空間に 浮かべて 与える スタイルだ.
<style type="text/css">
input.error, textarea.error{
border:1px dashed red;
}
label.error{
display:block;
color:red;
}
</style>
これ スタイルは エラーメッセージを input 下端に 浮かべて 与える スタイルだ.
jQuery Validation Plugin API 文書
API 文書を 見る 件 常に 面倒な 仕事だが, 有用な 仕事だったり する.
私が 見るのに API 文書 中 核心は rulesだ.
多様な オプションの API街 出ている 住所を まっすぐに リンクする 側だから 参考して 表示 望む.
jQuery 検証 プラグイン API 文書 : validate 関数の option 使い方
[2012-02-21 追加]ajaxFormプラグインと 同時に 使おうとすれば valid 関数を 使う.
[2012-11-04 追加] チェックボックスやラジオボタン検証方法, そしてエラーメッセージ位置を使用者が指定する方法を説明した文を書いた.
- コメント機能はありません。コメントの代わりに[email protected]にメールを送ってください。