ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery Validate フォーム検証プラグインは、属性属性_jquery クラスの形式で検証を追加します

jQuery Validate フォーム検証プラグインは、属性属性_jquery クラスの形式で検証を追加します

WBOY
WBOYオリジナル
2016-05-16 15:19:351580ブラウズ

この記事の例では、クラス属性の形式で検証を追加する jQuery Validate フォーム検証プラグインを紹介し、参考として皆さんと共有します。具体的な内容は次のとおりです。
効果は以下の通りです:

1. jQuery フォーム検証プラグイン、クラス属性の形式で検証を追加します

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----添加class属性形式的校验</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.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();
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----添加class属性形式的校验</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25" class="required email" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" class="url" value="" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>


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

  • (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)digits:true 整数を入力する必要があります
  • (9)クレジットカード: 有効なクレジット カード番号を入力する必要があります
  • (10)equalTo:"#field" 入力値は #field
    と同じである必要があります
  • 3bb3ba5d8a8c1e677360c9d603cb067b

  • (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

  • (17)min:10 入力値は 10 未満にすることはできません
  • デフォルトのプロンプト:


以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。