Posted by & filed under diary, programming.


JQuery.Validation.jsリアルタイムにフォーム値のValidationを行ってくれる便利なライブラリ,「JQuery.validation.js」.

自分みたいにJavaScriptの知識がない人間でも手軽に利用できる.

リアルタイムフォームバリデーション jQuery.validation.js – 5509

 

このスクリプトには,入力フォーム値の文字数をカウントして,設定した最小値,最大値以内に収めなければ,ポストできなくなる機能がついている.

が,現在作っているPHPスクリプトはUTF-8で内部処理をすべて行うようにしてあり,データベースのキャラクターもUTF-8に設定してある.

JISやEUCならば,全角文字=2byteとして計算すれば何の問題もなかったが,UTF-8は全角文字が3〜4byteに変動する.すべて4byteとして単純計算して文字数制限しても良かったけど,どうせなら…ということで,バイト数の最小値・最大値を設定できるように改造してみた.

 

完成品はこんな感じ.

--- jquery.validation.js.old	2009-05-24 03:24:22.000000000 +0900
+++ jquery.validation.js	2009-05-24 02:57:08.000000000 +0900
@@ -210,6 +210,16 @@
 		max: function(txt,t){
 			var length = $(t).attr("class").match(/max(d+)/) ? RegExp.$1 : null;
 			if(txt.length>0) return txt.length <= length;
+		},
+		byteMin: function(txt,t){
+			var length = $(t).attr("class").match(/byteMin(d+)/) ? RegExp.$1 : null;
+			var txtbyte = encodeURIComponent(txt).match(/(w|[!'()*-.~]|%[0-9A-F][0-9A-F])/ig).length;
+			if(txt.length>0) return txtbyte >= length;
+		},
+		byteMax: function(txt,t){
+			var length = $(t).attr("class").match(/byteMax(d+)/) ? RegExp.$1 : null;
+			var txtbyte = encodeURIComponent(txt).match(/(w|[!'()*-.~]|%[0-9A-F][0-9A-F])/ig).length;
+			if(txt.length>0) return txtbyte <= length;
 		}
 	},
 	fn: function(t,options){
@@ -222,6 +232,8 @@
 			zip: "正しい郵便番号を入力してください",
 			min: "文字以上で入力してください",
 			max: "文字以内で入力してください",
+			byteMin: "バイト以上で入力してください",
+			byteMax: "バイト以内で入力してください",
 			check: "ひとつ以上を選択してください",
 			radio: "いずれかを選択してください",
 			required: "必須項目です",
@@ -250,6 +262,8 @@
 				var msg = msgs;
 				if(c.match(/min/) && CL.match(/min(d+)/)) msg = RegExp.$1+msgs;
 				else if(c.match(/max/) && CL.match(/max(d+)/)) msg = RegExp.$1+msgs;
+				else if(c.match(/byteMin/) && CL.match(/byteMin(d+)/)) msg = RegExp.$1+msgs;
+				else if(c.match(/byteMax/) && CL.match(/byteMax(d+)/)) msg = RegExp.$1+msgs;
 				$.tip.msg(t.id,msg);
 				$.tip.fadeIn(t.id);
 				this.isError = true;

最初はオプション名を”minbyte”だとか,”bytemax”だとかにしてて,嵌った.

判定の正規表現をいろいろ工夫してみたけどいつまでたっても”min”と”bytemin”の区別を付けてくれない.(正規表現は苦手…)

仕方がないので,今の”byteMin”と”byteMax”のように,1文字大文字にすることで回避した.

 

JavaScriptが使えたらウェブページ作るときに可能性がかなり広がるな…いつか本格的に勉強したい.