ホームページ > 記事 > ウェブフロントエンド > jqueryフォーム検証プラグイン(jquery.validate.js)の3つの使い方_jquery

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

WBOYオリジナル: 2016-05-16 16:07:181729ブラウズ

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

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

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

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

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

685d1d81793ef9a579675e4aaba3b8912cacc6d41bbb37262a98f745aa00fbf0

40a1bca2d71c92afd5582229fdbe7b172cacc6d41bbb37262a98f745aa00fbf0

0519098475794f90d31ee18bf243dac82cacc6d41bbb37262a98f745aa00fbf0

2ac7b19f4602a7427fb36a357403532a2cacc6d41bbb37262a98f745aa00fbf0

ステップ 2: フォームのエラー出力を定義します:

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

080b747a20f9163200dd0a7d304ba388

#frm label.error {

色: 赤;

}

531ac245ce3e4fe3d50054a55f265927

ステップ 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 までご連絡ください。

前の記事：jQuery は empty() メソッドを使用して要素とそのすべての子要素を削除します_jquery次の記事：jQuery は empty() メソッドを使用して要素とそのすべての子要素を削除します_jquery

続きを見る

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

関連記事