jQuery Validate フォーム検証プラグインは、属性属性_jquery クラスの形式で検証を追加します-jsチュートリアル-php.cn

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

WBOY

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

オリジナル

1563 人が閲覧しました

この記事の例では、クラス属性の形式で検証を追加する 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
と同じである必要があります
(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 未満にすることはできません
デフォルトのプロンプト:

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