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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:07 PM

jquery

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。

声明

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

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles