jQuery 検証フォーム validation_jquery の詳細-jsチュートリアル-php.cn

jQuery 検証フォーム validation_jquery の詳細

WBOY

リリース： 2016-05-16 15:19:34

オリジナル

1466 人が閲覧しました

この記事の例では、jQuery Validate フォーム検証を紹介します。主に jquery.metadata.js を使用して、クラス属性に直接検証ルールを記述し、具体的な内容を共有します。は以下の通りです

1. 別のプラグイン jquery.metadata.js を追加し、コントロールに検証ルールを記述します。
2. 検証のトリガー方法を書き直す必要があります。

$("#commentForm").validate({meta: "validate"});

ログイン後にコピー

3. 詳細なコードは次のとおりです。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});
  
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

ログイン後にコピー

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

(1)required:true 必須フィールド
(2)remote:"check.php" ajax メソッドを使用して check.php を呼び出し、入力値を確認します
(3)email:true 正しい形式で電子メールを入力する必要があります
(4)url:true URL は正しい形式で入力する必要があります
(5)date:true 日付を正しい形式で入力する必要があります。日付検証 ie6 ではエラーが発生します。注意して使用してください。
(6)dateISO:true 日付 (ISO) を正しい形式で入力する必要があります。例: 2009-06-23、1998/01/22 形式のみが検証され、形式は検証されません。有効性
(7)number:true 有効な数値 (負の数、10 進数) を入力する必要があります
(8) 桁: true 整数を入力する必要があります
(9)クレジットカード: 正規のクレジットカード番号を入力する必要があります
(10)equalTo:"#field" 入力値は #field
(11) 受け入れる: 正当なサフィックスを含む文字列を入力します (ファイルのサフィックスに影響を受けません)
(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 を超えることはできません。
デフォルトのプロンプト:

4. レンダリングは次のとおりです:

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).",
  dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
  number: "Please enter a valid number.",
  numberDE: "Bitte geben Sie eine Nummer ein.",
  digits: "Please enter only digits",
  creditcard: "Please enter a valid credit card number.",
  equalTo: "Please enter the same value again.",
  accept: "Please enter a value with a valid extension.",
  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}.")
},

ログイン後にコピー

5. 注: class="{}" を使用するには、パッケージ jquery.metadata.js を導入する必要があります。

次のメソッドを使用してプロンプトの内容を変更できます:

equalTo キーワードを使用する場合は、次の内容を引用符で囲む必要があります。コードは次のとおりです。

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

ログイン後にコピー

6. エラーメッセージプロンプトをクラス属性で直接定義します。

class="{required:true,minlength:5,equalTo:'#password'}"

ログイン後にコピー

7. 効果は次のとおりです。

上記がこの記事の全内容です。最近、jQuery Validate フォーム検証に関する記事がたくさん更新されていますので、合わせて学習していただければ幸いです。