ホームページ > 記事 > ウェブフロントエンド > jQuery Validate プラグインは強力なフォーム検証を実装します function_jquery
jQuery Validate プラグインは、URL や電子メール検証を含む一連の便利な検証メソッドをバンドルし、ユーザー定義メソッドを作成するための API を提供します。バンドルされているすべてのメソッドでは、デフォルトでエラー メッセージに英語が使用され、他の 37 言語に翻訳されています。
セクション 1: jQuery 検証により検証が非常に簡単になります
1. 公式 Web サイトから jquery と jquery 検証プラグインをダウンロードします
2. ファイルをインポート
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
3. 次に、次の HTML フラグメント
を宣言します。
<form action="" id="jvForm"> 姓名:<input type="text" name="username" id="username" class="required" /></br> 密码:<input type="password" name="password" id="password" class="required"/></br> <input type="submit" value="提交" /> </form>
上記のコードを通じて、各入力に class="required" を追加したことがわかります
その機能は、入力タグが空の場合にユーザーにエラーを要求することです。
4. 最後に、フレームワークのエントリ ポイントを見つける必要があります
<script type="text/javascript"> $(function() { $("#jvForm").validate(); }) </script>
操作効果は以下の通りです
もちろん、プロンプト情報はデフォルトでは英語であり、必要に応じて jquery.validate.js で変更できます。
セクション 2: jQuery 検証により検証が非常に簡単になります
前の例では、すべての必須フィールドのプロンプト情報が「このフィールドは必須です。
」となるように、jquery.validate.js を一律に引用しました。
次に、これを動的プロンプトに変更する必要があります。たとえば、名前が空の場合は、パスワードを空にできないというプロンプトが表示されます。
今回はコード内に検証ルールを記述します
まず、ファイル
をインポートします
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
次に、次の HTML フラグメントを宣言します
<form action="" id="jvForm"> 姓名:<input type="text" name="username" id="username" /></br> 密码:<input type="password" name="password" id="password" /></br> <input type="submit" value="提交" /> </form>
前のものと比較すると、class="required"
がありません
最終的な検証ルールは次のとおりです:
$(function() { $("#jvForm").validate({ rules: { username: { required: true }, password: { required: true } }, messages: { username: { required: "姓名不能为空!" }, password: { required: "密码不能为空!" } } }); })
操作効果は以下の通りです
セクション 3: jQuery 検証により検証が非常に簡単になります
次のコードは、必須フィールド、文字長、形式検証を含む jQuery 検証の簡単なデモンストレーションです
1. ファイルをインポートします
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script>
2. HTML フラグメントの宣言
<form action="" id="jvForm"> 用 户 名:<input type="text" name="username"/></br> 密 码:<input type="password" name="password" id="password"/></br> 确认密码:<input type="password" name="confirm_password"/></br> 出 生 地:<select name="address"><option value="">--</option><option value="1">北京</option> <option value="1">上海</option><option value="1">深圳</option></select></br> 手 机:<input type="text" name="mobile" /></br> 邮 箱:<input type="text" name="email" /></br> <input type="submit" value="提交" /> </form>
3. エラー プロンプトのスタイル
<style type="text/css"> label.error{font-size:12px;font-weight: normal;color:#ff0511;margin-left:10px;} </style>
4. 確認コード
<script type = "text/javascript"> $(function() { $("#jvForm").validate({ rules: { username: { //用户名必填 至少3位 required: true, minlength: 3 }, password: { //密码必填 至少6位 required: true, minlength: 6 }, confirm_password: { //密码确认 required: true, equalTo: "#password" }, address: { //出生地必填 required: true }, mobile: { //手机必填 验证格式 required: true, mobile: true }, email: { //email必填 验证格式 required: true, email: true }, }, messages: { username: { required: "用户名不能为空!", minlength: "用户名至少三位!" }, password: { required: "密码不能为空!", minlength: "密码至少六位!" }, confirm_password: { required: "密码确认不能为空!", equalTo: "两次输入密码不一致 !" }, address: { required: "请选择出生地!", }, mobile: { required: "手机不能为空!", mobile: "手机格式不正确", }, email: { required: "邮箱不能为空!", email: "邮箱格式不正确", }, } }); }) </script>
jquery.validate.js にはモバイル認証がないため、自分で追加する必要があります
まずメッセージを検索し、次のようにモバイルを追加します:
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", mobile: "请填写正确的手机号码.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") }
次に、モバイルの定期チェック
をメソッドに追加します
mobile: function( value, element ) { return this.optional(element) || /^1[3|4|5|8][0-9]\d{8}$/.test(value); }
操作効果
上記は、フォームに強力な検証機能を提供する jQuery Validate プラグインです。気に入っていただければ幸いです。