コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

jqueryフォーム検証プラグイン(jquery.validate.js)の3つの使い方_jquery

WBOY
リリース： 2016-05-16 16:07:18
オリジナル
1773 人が閲覧しました

jquery 検証は非常に簡単で、一般的に使用される 3 つの方法をまとめます。

最初の方法: これも比較的標準的な方法:

まず、jquery プラグインと jquery 検証プラグインを紹介します。

ステップ 1: プラグインを導入する

コードをコピー コードは次のとおりです:






ステップ 2: フォームのエラー出力を定義します:
コードをコピー コードは次のとおりです:



ステップ 3: エラー処理メソッドを追加します。

jquery 検証には次のものが必要です:

1: 検証方法を定義します
2: 検証ルールを追加

よく使われる検証例を以下に掲載していますので、一目で分かりやすくなっています。

最初にレンダリングを見てください: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
	#frm label.error {
		color: Red;
	}
</style>
</head>
<script type="text/javascript">

$(document).ready(function(){
  $("#clickme").click(function(){
     alert("Hello World");
 });
 
 
 
  $( "#frm" ).validate({
      rules: {
          username: {
              required: true,
              minlength: 4,
              maxlength: 20,
              byteMaxLength:20,
              valiEnglish:true
          },
          postcode: {
          	 postcodeVal:true
          	},
          number: {
          	byteMaxLength:5,
          	numFormat:5
          	},
          	identifier: {
          	sfzhValidate:true	
          }
          	
          	
          
      },
      messages: {
          username: {
              required: "请输入用户名4--20个英文字符",
              minlength: $.format("Keep typing, at least {0} characters required!"),
              maxlength: $.format("Whoa! Maximum {0} characters allowed!")
          },
          number: {
          	  numFormat: $.format("请输入{0}数字")
          	}
      }
  });
 
 
 
 jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
 
 jQuery.validator.addMethod("numFormat",function(value,element,param){
			 return this.optional(element) || /^\d*$/.test(value);
			}
			//,$.validator.format("请输入数字{0}位以内")
			);
			
			
			 
			//number(9,3)
			jQuery.validator.addMethod("numFormat63",function(value,element){
			 return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
			},$.validator.format("请输入合法数字,精度格式123456.0")
			);
			
			
			jQuery.validator.addMethod("postcodeVal",function(value,element){
			 return this.optional(element) || /^[0-9]\d{5}(&#63;!\d)$/.test(value);
			},$.validator.format("请输入合法的邮编")
			);
			
			jQuery.validator.addMethod("numberAndLettersVal",function(value,element){
			 return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
			},$.validator.format("请输入字母或数字")
			);
			
			
			
			jQuery.validator.addMethod("sfzhValidate",function(value,element){
			 return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
			},$.validator.format("请输入合法身份证号")
			);
			
			
			
			jQuery.validator.addMethod("valiEnglish",function(value,element){
			 return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
			},$.validator.format("请输入字母或者空格")
			);
		

});


</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
  <input type="text" name="username" id="username" />
</label>
 <p>
  <label>邮    编 :<label></label></label>
  <label>
  <input type="text" name="postcode" id="postcode" />
  <br />
  </label>
 </p>
 <p><label>数   字 : 
  <input type="text" name="number" id="number" />
 </label>
  <br /><label>身份证号：
  <input type="text" name="identifier" id="identifier" />
  </label>
   
 <label>
 <input type="button" name="clickme" id="clickme" value="click me" />
 </label>
 </p>
</form>
</body>
</html>
ログイン後にコピー

これは完全な検証例です。紹介されたコードはアップロードされており、クリックしてダウンロードできます
。 主なメソッドを以下に説明します: 

 jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
ログイン後にコピー

jQuery.validator.addMethod() メソッドには 3 つのパラメータがあります。
最初のパラメータ「byteMaxLength」はメソッド名を定義するもので、メソッド名は一意である必要があり、識別子フラグです。
2 番目のパラメータ: は次のコールバック関数です: 

function(value,	element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}
ログイン後にコピー

コールバック関数には 3 つのパラメータがあります:

最初の値: value は、現在検証されている要素の値です。
2 番目の要素: element は現在検証中の要素です。
3 番目: は受信パラメータです。例: min: 5 このパラメータは 5 です。このメソッドが呼び出されるときは、たとえば: byteMaxLength: 10 ここで、10 は受信パラメータです。

このメソッドのメソッド名は次のとおりです: byteMaxLength コールバック関数は上記のとおりです、
コールバック関数の機能は、入力されたバイト数を確認することです。1 つの漢字は 2 つの文字を表し、文字は ASCII コード 0 ～ 127 で、いずれかの文が返されます。 return this.optional(element) この関数呼び出しの意味は次のとおりです。フィールドが空である場合、つまり要素の値が空である場合、this.optional(element) = フォーム入力値が空でないことを確認するために使用されます。 true は、フィールドが必須項目ではなく、入力されていなくても検証に合格することを意味します。要素の値が空でない場合、this.optional(element) = false、true を返す目的、またはfalse は || の後ろの検証に基づいて判断されます。つまり、この .optional(element) は現在検証されているフィールドが必須ではないことを示しています。

3 番目のパラメータ: 次のように:

コードをコピーします コードは次のとおりです:
$.validator.format("{0} バイトを超えることはできません (漢字 1 文字は 2 バイトとしてカウントされます)")

この 3 番目のパラメーターは、検証プロンプト情報であるメッセージを直接指定できます。関数の検証情報を表示するには、関数 jQuery.validator.format(value) を作成することによって、このパラメーターを表示することもできます。 {0} は、このメソッドのパラメータが byteMaxLength: 10 のように呼び出された場合、上記の入力は 10 バイトを超えることはできません (1 つの漢字は 2 バイトとしてカウントされます)

以下のコードを見てください: 

  $( "#frm" ).validate({
      rules: {
          username: {
              required: true,
              minlength: 4,
              maxlength: 20,
              byteMaxLength:20,
              valiEnglish:true
          },
          postcode: {
          	 postcodeVal:true
          	},
          number: {
          	byteMaxLength:5,
          	numFormat:5
          	},
          	identifier: {
          	sfzhValidate:true	
          }
          	
          	
          
      },
      messages: {
          username: {
              required: "请输入用户名4--20个英文字符",
              minlength: $.format("Keep typing, at least {0} characters required!"),
              maxlength: $.format("Whoa! Maximum {0} characters allowed!")
          },
          number: {
          	  numFormat: $.format("请输入{0}数字")
          	}
      }
  });
ログイン後にコピー
まず、これはメソッド呼び出しです

コードをコピーします コードは次のとおりです:
$( "#frm" ).validate([オプション])

验证选择的表单，方法的参数是可选项，可以输入0个或者键值对（key/value）
这个方法是为了 处理例如：submit , focus , keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素，使用rules和 messages 定义验证的元素，使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, and ignoreTitle去控制非法元素的错误信息显示。

下面看 validate 的方法 rules();

返回 第一个选择的元素的验证的规则， 有若干种方式定义验证规则。

rules 方法定义了基于id的验证，

复制代码 代码如下:

username: {
required: true,
minlength: 4,
maxlength: 20,
byteMaxLength:20,
valiEnglish:true
}

如上：其中，username为 id名， {}中为定义的验证方法，就是这个id 的都需要哪些方法验证，方法名就是上面讲到的方法；

这样就定义了。

messages中定义了 ：

复制代码 代码如下:

username: {
required: "请输入用户名4--20个英文字符",
minlength: $.format("Keep typing, at least {0} characters required!"),
maxlength: $.format("Whoa! Maximum {0} characters allowed!")
}


这个id中方法验证错误提示信息。其中可以直接输出message或者调用 $.format()方法。

上面的标准格式就是：

复制代码 代码如下:

var $params = {debug:false, rules:{}, messages:{}};
$("#frm").validate($params);

rules{}中定义验证规则的方法。 messages{}定义错误输出。
以上为第一种方式：

第二种方式：和第一种基本差不多：
ログイン後にコピー

以上为第二种方式的代码：其中：
方法定义和第一种一样：在于调用：

复制代码 代码如下:

function check_infor(){

$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");
$("#postcode").attr("class","{byteMaxLength:6,postcodeVal:true}");


$("#number").attr("class","{byteMaxLength:6,numFormat:6}");
$("#identifier").attr("class","{sfzhValidate:true}");

}


其中定义了一个javascript方法专门用于为form表单中需要验证的id进行验证：
其中用到了.attr() 方法：这个方法有很多种参数形式 .attr(attributeName,value)方法
attributeName为参数名： value 为参数值
其中下面means 是为 id为username的 元素 的 class 属性 添加值：

复制代码 代码如下:

"{byteMaxLength:22,valiEnglish:true}"

复制代码 代码如下:

$("#username").attr("class","{byteMaxLength:22,valiEnglish:true}");

这样该id元素就有了验证。

注意： 在自定义的check_infor()调用之前 ，必须首先调用$("#frm").valudate();方法；

第三种方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>
<style type="text/css">
	#frm label.error {
		color: Red;
	}
</style>
</head>
<script type="text/javascript">

$(document).ready(function(){
  $("#clickme").click(function(){
     alert("Hello World");
 });
  
  jQuery.validator.addMethod("byteMaxLength", function(value,
					element, param) {
				var length = value.length;
				for ( var i = 0; i < value.length; i++) {
					if (value.charCodeAt(i) > 127) {
						length++;
					}
				}
				return this.optional(element) || (length <= param);
			}, $.validator.format("不能超过{0}个字节(一个中文字算2个字节)"));
 
  jQuery.validator.addMethod("numFormat",function(value,element,param){
			 return this.optional(element) || /^\d*$/.test(value);
			},$.validator.format("请输入数字{0}位以内")
			);
			
			
			 
			//number(9,3)
			jQuery.validator.addMethod("numFormat63",function(value,element){
			 return this.optional(element) || /^[0-9]{1,6}(\.\d{1,3})$/.test(value);
			},$.validator.format("请输入合法数字,精度格式123456.0")
			);
			
			
			jQuery.validator.addMethod("postcodeVal",function(value,element){
			 return this.optional(element) || /^[0-9]\d{5}(&#63;!\d)$/.test(value);
			},$.validator.format("请输入合法的邮编")
			);
			
			jQuery.validator.addMethod("numberAndLettersVal",function(value,element){
			 return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
			},$.validator.format("请输入字母或数字")
			);
			
			
			
			jQuery.validator.addMethod("sfzhValidate",function(value,element){
			 return this.optional(element) || /^(\d{14}|\d{17})(\d|[xX])$/.test(value);
			},$.validator.format("请输入合法身份证号")
			);
			
			
			
			jQuery.validator.addMethod("valiEnglish",function(value,element){
			 return this.optional(element) || /^[a-zA-Z ]*$/.test(value);
			},$.validator.format("请输入字母或者空格")
			);
			
	 	$("#frm").validate();
		$('#username').rules('add', { required: true, byteMaxLength:20,valiEnglish:true});
        $('#postcode').rules('add', { postcodeVal:true});
        $('#number').rules('add', { byteMaxLength:5,numFormat:5});
        $('#identifier').rules('add', { sfzhValidate:true});
 
		
});




</script>
<body>
<form id="frm" name="frm" method="post" action=""><label>用 户 名:
  <input type="text" name="username" id="username" />
</label>
 <p>
  <label>邮    编 :<label></label></label>
  <label>
  <input type="text" name="postcode" id="postcode" />
  <br />
  </label>
 </p>
 <p><label>数   字 : 
  <input type="text" name="number" id="number" />
 </label>
  <br /><label>身份证号：
  <input type="text" name="identifier" id="identifier" />
  </label>
   
 <label>
 <input type="button" name="clickme" id="clickme" value="click me" />
 </label>
 </p>
</form>
</body>
</html>
ログイン後にコピー


第三种方式与其他两种方式不同的地方就是：

复制代码 代码如下:

                $('#username').rules('add', { required: true,  byteMaxLength:20,valiEnglish:true});
                $('#postcode').rules('add', { postcodeVal:true});
                $('#number').rules('add', { byteMaxLength:5,numFormat:5});
                $('#identifier').rules('add', { sfzhValidate:true});


为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法：
增加验证规则为匹配的元素。
注意：$("form").validate()方法必须首先被调用。
这个规则也能包含一个messages-object，定义常用的messages。

関連ラベル：
jquery
ソース：php.cn
前の記事：jQuery は empty() メソッドを使用して要素とそのすべての子要素を削除します_jquery 次の記事：click events_jquery を呼び出してバインドするための JQuery を記述する 3 つの方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...
から 2024-04-05 09:26:49
0
1
1418
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...
から 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...
から 2024-04-04 12:53:48
0
1
303
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート