jQuery は、HTML ファイルのトラバース、イベント処理、アニメーション、および Ajax インタラクションを簡素化し、Web ページ制作の迅速な開発を促進する、高速でシンプルな JavaScript ライブラリです。 jQuery は、JavaScript の記述方法を変えるように設計されています。
jQuery Validate プラグインは、フォームの強力な検証機能を提供し、クライアント側のフォーム検証を容易にします。
しかし、学習の過程で、インターネット上の多くの例は jquery.metadata.js ライブラリに依存しているようで、クラス自体はタグ内に記述されています。プレゼンテーション スタイルにさまざまな検証ルールが追加され、少し乱雑に見えます。では、jquery.metadata.js に依存しない場合はどのように書くかです。
1. jquery.js (特定のバージョンを自分で選択) と jquery.validate.js
のみを導入します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" required="true" minlength="6">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" required="true" email="true"> </input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
|
ログイン後にコピー
上記2つのJSファイルを導入するだけで簡易フォーム検証が完了することが分かりました。
2. ただし、デフォルトのプロンプト情報は英語であるため、わかりやすいプロンプトを作成するには、次にプロンプト情報を中国語で表示する必要があります。
方法 1. JavaScript を使用してプロンプト情報をカスタマイズします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | <!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate({
rules : {
username : {
required : true,
rangelength:[2,10]
},
password : {
required : true,
minlength:6
},
confirmpassword : {
required : true,
equalTo:"#cpassword"
},
email : {
required : true,
email : true
}
},
messages : {
username : {
required : '请输入姓名',
rangelength:'长度在 {0} 到 {1} 之间'
},
password : {
required : '请输入密码',
minlength:'密码不能少于 {0}位'
},
confirmpassword : {
required : '请再次输入密码',
equalTo:'两次输入的密码不一致'
},
email : {
required :'请输入邮箱',
email : '请输入有效的电子邮件地址'
}
}
});
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text"/>
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password"/>
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password"/>
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" type="email"/>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
|
ログイン後にコピー
最初にメソッド呼び出しがあります: $("#registerForm").validate([options]) これは選択を確認するために使用されるフォームです。メソッドのパラメーターはオプションであり、0 個以上のキー値を入力できます。 (キー/値) の場合、このメソッドは、検証をトリガーする送信、フォーカス、キーアップ、クリックなどを処理します。オブジェクトは、ルールとメッセージを使用してフォーム全体の要素になります。検証用の要素を定義し、 errorClass 、 errorElement、wrapper、errorLabelContainer、errorContainer、showErrors、success、errorPlacement、highlight、unhighlight、ignoreTitle を使用して、不正な要素のエラー メッセージの表示を制御します。このうち、ルールには 0 個以上のキーと値のペアを入力することもでき、そのキーは要素の name 属性値 (username、confirmpassword など) に対応します。そして、彼の値にはいくつかの検証ルールが含まれています。ルールと同様に、メッセージには 0 個以上のキーと値のペアを入力できます。そのキーは、対応する要素の name 属性値でもあり、その値は検証エラー メッセージです。つまり、 rules{} のメソッドは検証ルールを定義します。エラー出力はメッセージで定義されます。{}
上記で注意すべき点は、equalTo: "#cpassword" です。このキーと値のペアの値は、要素の ID 値です (# 記号に注目すれば、それを検出できるはずです)。
上記の記述方法により、プロンプト情報をカスタマイズすることができます。質問があるかもしれませんが、フォームを確認するたびにプロンプト情報を再カスタマイズする必要がありますか?もちろんそうではありません。Ctrl C+Ctrl V を押すこともできます。もちろんこれは冗談です。 。 。ただし、次の方法 2 で疑問が解決されます。
方法 2: プロンプト メッセージをカスタマイズし、JS ファイルとして保存します。これをテンプレートとして使用し、必要なページに直接インポートするだけです。インターネットからコピーをダウンロードしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | (function( factory ) {
if ( typeof define === "function" && define.amd ) {
define( ["jquery", "../jquery.validate"], factory );
} else {
factory( jQuery );
}
}(function( $ ) {
$.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} 的数值")
});
}));
|
ログイン後にコピー
ページのコードは、追加の JS ファイルが導入されていることを除いて、JV1.HTML とほぼ同じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script>
$().ready(function() {
$("#registerForm").validate();
});
</script>
</head>
<body>
<form id="registerForm" method="get" action="">
<fieldset>
<p>
<label for="cusername">用户名</label>
<input id="cusername" name="username" type="text" required="true" rangelength="[2,10]">
</p>
<p>
<label for="cpassword">密码</label>
<input id="cpassword" name="password" type="password" required="true" minlength="6">
</p>
<p>
<label for="cconfirmpassword">确认密码</label>
<input id="cconfirmpassword" name="confirmpassword" type="password" required="true" equalTo="#cpassword">
</p>
<p>
<label for="cemail">邮箱</label>
<input id="cemail" name="email" required="true" email="true"> </input>
</p>
<p>
<input type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
|
ログイン後にコピー
方法 1 と 2 は相互に排他的ではなく、組み合わせて使用できます。まず方法 2 を使用してより一般的なテンプレートを保存し、次に方法 1 を使用して特定の状況に応じてプロンプトをカスタマイズできます。
上記は今日の午後私が学んだことです。新しいバージョンでは、前述の jquery.metadata.js ライブラリに依存する必要がなく、代わりに data-rule-verification を使用してプロンプト情報をカスタマイズする必要もありません。ルールは、タグ、data-msg-prompt 情報で使用され、この形式で再定義されます。試してみるのが楽しみ...
以下は公式 Web サイトが提供するデフォルトの検証ルールです。
(1)必須:必須フィールド
(2)remote:"check.php" ajaxメソッドを使用してcheck.phpを呼び出し、入力値を確認します
(3)email:true 正しい形式で電子メールを入力する必要があります
(4)url:true URL を正しい形式で入力する必要があります
(5)date:true 日付を正しい形式で入力する必要があります
(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 未満にすることはできません
さて、2 時間近く手探りした結果、私の最初のエッセイが完成しました。同時に、皆さんにインスピレーションを与えることができれば幸いです。
次の記事ではjQuery Validate 予備体験(2)、一緒に学びましょう。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
