jQeury Validation Engine とは
リアルタイムで入力チェックをするjQueryのプラグインです。
動作デモ
ダウンロード
実装方法
http://pb-times.jp/P_528da982d624e
http://blog.shuffleee.com/1207/
やりたかったこと
こちらのプラグイン、実装は非常に簡単です。
が、やはりいろいろカスタマイズしたいので、その方法をいくつか解説します。
独自の入力チェックを追加したい
例：郵便番号の形式チェックを追加
"zip": {
// credit: jquery.h5validate.js / orefalo
"regex": /^\d{3}-\d{4}$|^\d{7}$/,
"alertText": "* 郵便番号が正しくありません"
},
他のものに倣って、正規表現とエラーメッセージを追加。
<input type="text" id="zip" name="zip" class="validate[required,custom[zip]]">
input のクラス名にvalidate[required,custom[zip]] を指定。
メールアドレスを docomo の特殊なアドレスでも通過するようにする
稀に、メールアドレスの＠以前で ドットが2つ以上連続している ものがあります。
何年か前に、RFC（国際標準みたいなの）に準拠しないこの形式のアドレスは新規登録できなくなりましたが、そのまま使われているケースもあります。
デフォルトだと、上記のようなアドレスはチェックに引っかかって通過できません。
before
"email": {
// Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/
"regex": /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,
"alertText": "* メールアドレスが正しくありません"
after
"email": {
// Shamelessly lifted from Scott Gonzalez via the Bassistance Validation plugin http://projects.scottsplayground.com/email_address_validation/
"regex": /^([a-zA-Z0-9])+([\.a-zA-Z0-9_-])*@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+/i,
"alertText": "* メールアドレスが正しくありません"
},
これで一応、ドットが2つ以上連続するメールアドレスも通過します。
ただ、この正規表現でも漏れがあるようです。
100%完璧なメールアドレスチェックの正規表現を書くのはほぼ不可能だそうです。
下記の記事を参考に、自己責任で正規表現を入れ替えてください。
エラーメッセージ中の日付の形式を変更したい
before
/**
* date -> string
*
* @param {Object} date
*/
_dateToString: function(date) {
return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
},
/**
after
/**
* date -> string
*
* @param {Object} date
*/
_dateToString: function(date) {
return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
},
/**
デフォルトではハイフン（-）だったのをスラッシュ（/）に入れ替えただけです。年月日の日本語表記にも変えられますね。
エラーメッセージを「**以降の日付にしてください」に変える
当日や過去の日付を選んでいないかをチェックするfutureというクラス。
デフォルトだと「より最近の日付にしてください」となっていますが、わかりづらいので「以降の日付にしてください」に変える方法。
"future": {
"regex": "none",
"alertText": "* ",
"alertText2": " 以降の日付を選んでください"
},
alertText2 の内容を変えます。
/**
* date -> string
*
* @param {Object} date
*/
_dateToString: function(date) {
var ndate = new Date(date.getFullYear(), date.getMonth() + 1, 0);
if(date.getDate()==ndate.getDate()){
//月末の場合
if(date.getMonth()==12){
//年末の場合
var errYear = date.getFullYear()+1;
var errMonth = 1;
var nextDate = 1;
} else {
var errYear = date.getFullYear();
var errMonth = date.getMonth()+2;
var nextDate = 1;
}
} else {
var errYear = date.getFullYear();
var errMonth = date.getMonth()+1;
var nextDate = date.getDate()+1;
}
return errYear+"/"+errMonth+"/"+nextDate;
},
「以降」なので、今日よりも一日先にしなきゃいけないですよね。
そこで、一日先の日付を返すように設定します。
月末や年末があるので、単に日付に+1 をすればいいわけではないです。
2014/7/32 のようなあり得ない日付が生まれてしまいます。
ということで、上のようなコードを書いてみました。
無理矢理な感じが否めないですが。。
他にも
CSSなどでカスタマイズが可能です。
あと、ブラウザごとの対策も必要になる場合があります。
その辺はまた続編で。