[MooTools] Form.Validator.addAllThese for Japanese

MooToolsのForm.Validatorの足りないところを補う日本語環境向けaddAllThese。中身は殆どzeromailからの転載。
全角チェック、全てひらがな、全てカタカナ、全て全角数字、全て全角英数、日本語の有無、郵便番号、電話番号。
続きに郵便番号検索APIとの連携例と、Form.Validatorを搭載したメールフォームのデモがあります。

Form.Validator.addAllThese([
	['isJpOnly',
		{
			errorMsg:'全て半角英数の文字列は使用できません。',
			test: function(el){if(el.value.length == 0) return true; else return !el.get('value').test(/^[\x01-\x7e]+$/,'i');}
		}
	],
	['isNoAlp',
		{
			errorMsg:'全て全角で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[^ -~。-゚]*$/);}
		}
	],
	['isHirakana',
		{
			errorMsg:'全てひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[あ-ん]+$/,'i');}
		}
	],
	['isKatakana',
		{
			errorMsg:'全てカタカナで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ン]+$/,'i');}
		}
	],
	['isZNum',
		{
			errorMsg:'全て全角数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9]+$/,'i');}
		}
	],
	['isZAlp',
		{
			errorMsg:'全て全角英数字で記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[0-9A-Z]+$/,'i');}
		}
	],
	['isKana',
		{
			errorMsg:'カタカナもしくはひらがなで記入してください。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[ア-ンあ-ん]+$/,'i');}
		}
	],
	['validate-zipcode',
		{
			errorMsg:'郵便番号の書式に誤りがあります。',
			test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/);}
		}
	],
	['validate-tel',
		{
			errorMsg:'電話番号の書式に誤りがあります。',
			test:function(el){
				var value = el.get('value');
				if(value.length == 0) return true;
				
				if(el.get('value').test("-")){
					if(value.test(/^(090|080|070)/)){
						return value.test(/(^(090|080|070)(\-\d{4}\-\d{4})$)|(^[\d\-]{13}$)/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120(\-\d{2,3}\-\d{3,4}|[\d\-]{12})$)|(^0080\-\d{3}\-\d{4}$)/);
					}else{
						return value.test(/(^\d{2,5}?\-\d{1,4}?\-\d{4}$|^[\d\-]{12}$)/);
					}
				}else{
					if(value.test(/^(090|080|070)/)){
						return value.test(/^(090|080|070)\d{8}$/);
					}else if(value.test(/^(0080|0120)/)){
						return value.test(/(^0120\d{6}$)|(^0080\d{7}$)/);
					}else{
						return value.test(/^\d{10}$/);
					}
				}
			}
		}
	]
]);

電話番号の正規表現修正

続きを読む

[mootools]セレクトメニューを連動させて動的に選択肢を変更する

セレクトメニューが2つあって、1つ目のセレクトメニューを選択したら、その値によって2つ目のセレクトメニューの選択肢を入れ替えるというものです。
わざわざ何番煎じか分からないネタを遇えて取り上げたのは、巷でよく見かける「配列にデータを入れて出力する」という方法ではなく、Validなソースでこれをやりたかったためです。
選択肢がやたらと多くなりがちなもの、たとえば県から市を選んだりするフォームなどでよく使われていると思います。
とりあえずセレクトメニュー2つだけ連動させてみました。

XHTML

連動させるセレクトメニューにそれぞれIDが必要。
親セレクトメニューのoption要素につけたクラス名と、子セレクトメニューのoptgroup要素のクラス名を同じにします。
optgroup内に入れた要素が選択された時に入れ替わる選択肢になります。

<label for="select">選択肢1</label>
<select name="select" id="select">
	<option value="果物" class="fruit">果物</option>
	<option value="肉" class="meat">肉</option>
	<option value="魚" class="fish">魚</option>
</select>
<label for="select2">選択肢2</label>
<select name="select2" id="select2">
	<optgroup class="fruit" label="果物">
	<option value="リンゴ" selected="selected">リンゴ</option>
	<option value="みかん">みかん</option>
	<option value="ぶどう">ぶどう</option>
	<option value="桃">桃</option>
	</optgroup>
	<optgroup class="meat" label="肉">
	<option value="m1">牛肉</option>
	<option value="m2">豚肉</option>
	<option value="m3">鶏肉</option>
	</optgroup>
	<optgroup class="fish" label="魚">
	<option value="maguro">マグロ</option>
	<option value="sisyamo">ししゃも</option>
	<option value="iwashi">イワシ</option>
	<option value="sanma">サンマ</option>
	</optgroup>
</select>

見ての通り普通にソース書くのとそう変わらんので、javscriptオフでもフォームは機能します。
option要素を持たないselectを作る必要もないからバリデートに怒られる心配もない。
optgroupのラベルはどっちでもいい。

続きを読む

[XHTML]コピペ用セレクトメニュー(テキスト編)

入力フォームで良く使うセレクトメニューのサンプルソース。
都道府県、質問内容、違反報告内容など。

お届け時間指定

業者によって時間は変わるけど大体こんな感じ。

<select name="time">
<option>希望なし</option>
<option>午前中</option>
<option>12時-14時</option>
<option>14時-16時</option>
<option>16時-18時</option>
<option>18時-20時</option>
<option>20時-21時</option>
</select>

続きを読む

[XHTML]コピペ用フォームパーツ(数字編)

年月日や西暦、商品個数などに使えるセレクトメニューのXHTMLソース。コピペ用です。

月(1~12)のセレクトメニュー

<select name="month">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
  <option value="12">12</option>
</select>

9~0のセレクトメニュー

<select name="num">
  <option value="9">9</option>
  <option value="8">8</option>
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
  <option value="0">0</option>
</select>

続きを読む

[JS]フォームボタンまとめ

使用頻度の高いフォームボタンのメモ。
主にJavascriptを使用したものです。

XHTML形式のinputとbuttonの2タイプ用意してみた。
onclickとonkeypressを別のタグ(aとか)に書いても機能します。

ウィンドウを閉じる

<input type="button" value="ウィンドウを閉じる" onclick="window.close();" onkeypress="window.close();" />
<button type="button" onclick="window.close();" onkeypress="window.close();">ウィンドウを閉じる</button>

続きを読む

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy