使い方が知りたいjQueryのフォームバリデーションプラグイン

2年 ago
海斗, 葵
1 minute

jQueryフォームバリデーションプラグインを使用するには、次の手順に従う必要があります。

  1. jQueryライブラリとjQueryフォーム検証プラグインのソースファイルをインポートします。HTMLファイルのタグ内に以下のコードを追加します。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="path/to/jquery-validation-plugin.js"></script>

注意：path/to/jquery-validation-plugin.js を、プラグイン ファイルが実際に存在するパスに書き換えてください。

  1. HTMLでフォームを作成する。例えば：
<form id="myForm">
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="提交">
</form>
  1. jQueryを使ったフォームチェックプラグインを初期化してルールを定義するにはJavaScriptファイルに以下を記述します。
$(document).ready(function() {
$('#myForm').validate({
rules: {
username: {
required: true,
minlength: 3
},
password: {
required: true,
minlength: 5
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名至少需要3个字符"
},
password: {
required: "请输入密码",
minlength: "密码至少需要5个字符"
}
}
});
});

入力されたusernameとpasswordはそれぞれ必須かつ最小文字数が求められ、また変数messagesには入力規則による検証に失敗した場合のエラーメッセージ定義を行います。

  1. 最後に、検証の結果によって、フォームサブミットのロジックを処理できます。例えば、フォームサブミットイベントに次のコードを追加します。
$('#myForm').submit(function() {
if ($(this).valid()) {
// 表单验证通过，执行提交逻辑
} else {
// 表单验证失败，不执行提交逻辑
}
});

ここで、valid() メソッドを使用してフォームが検証に合格したかどうかを判断します。

上記のステップを完了すれば、jQueryフォーム検証プラグインを正常に使用できるようになります。プラグインの具体的な機能に応じて、検証ルールやカスタムエラーメッセージを拡張することもできます。詳細はプラグインのドキュメントを参照してください。

bannerAds