Home > MooTools > [MooTools] Form.Validator.addAllThese for Japanese

[MooTools] Form.Validator.addAllThese for Japanese

2010-03-02 (火) 12:23
MooTools
ContactForm | Form | Validator

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

PLAIN TEXT

JavaScript:

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(/^[０-９]+$/,'i');}
}
],
['isZAlp',
{
errorMsg:'全て全角英数字で記入してください。',
test:function(el){if(el.value.length == 0) return true; else return el.get('value').test(/^[０-９Ａ-Ｚ]+$/,'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}$/);
}
}
}
}
]
]);

電話番号の正規表現修正

郵便番号検索との連携

バリデータをクリアしたら郵便番号検索APIにリクエストを送信して住所を表示する。
APIは大抵JSONPなのでMoreのRequest.JSONPが必要。
下記サンプルはここの郵便番号検索APIを利用した場合のソースです。

HTMLはZeroMailのメールフォームから一部抜粋。

PLAIN TEXT

HTML:

<tr>
<th scope="row"><label id="zipcode">郵便番号</label></th>
<td><input name="zipcode" type="text" id="zipcode" size="50" tabindex="4" class="validate-zipcode" /></td>
</tr>
<tr>
<th scope="row"><label for="address">住所</label></th>
<td><input name="address" type="text" id="address" size="50" tabindex="5" /></td>
</tr>

PLAIN TEXT

JavaScript:

['validate-zipcode',
{
errorMsg:'郵便番号の書式に誤りがあります。',
test:function(el){
if(el.value.length == 0){ return true;
}else if(el.get('value').test(/(^\d{3}\-\d{4}$)|(^\d{7}$)/)){
new Request.JSONP({
noCache:true,
url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode='+el.get("value")+"&callback=Request.JSONP.request_map.request_0",
onRequest:function(){
$$(".address-box").fade(0.3).setProperty('readonly','readonly');
},
onComplete: function(obj){
if($type(obj.results)=="array")
$$(".address-box").set("value",obj.results[0].address1+obj.results[0].address2+obj.results[0].address3).removeProperty('readonly').fade(1);
else
$$(".address-box").fade(1).removeProperty('readonly');
}
}).send();
return true;
}
}
}
]

メールフォームへの実装例

CSSとXHTMLはZeroMailのデフォルトのやつです。

Tags:
ContactForm , Form , Validator

Newer: ZeroMail ver1.2
Older: ZeroMail ver1.1

Comments:0

Trackbacks:0

Trackback URL for this entry: http://tenderfeel.xsrv.jp/mootools/768/trackback/
Listed below are links to weblogs that reference: [MooTools] Form.Validator.addAllThese for Japanese from WebTecNote

Home > MooTools > [MooTools] Form.Validator.addAllThese for Japanese

Search

Scripts

カテゴリー