バリデーションをプラグインを使わずに実装する
フォームは主にコンバージョンに直結する場合が多いと思いますので,
どのような機能を持って使いやすくするのか,
前回は,
- ※1)
- 入力項目の正当性チェック
入力された文字列をチェックする
文字列チェックのパターン
まずは文字列チェックのパターンをリストに挙げてみましょう。
- 必須チェック
(空文字) - メールアドレス
- 数字のみ
- アルファベットのみ
- 電話番号
- URL
基本的な項目としてはこんな所でしょうか。
チェックの方法
例えば,
- 1文字でも文字列が存在するか
- 半角スペース・
全角スペース・ 改行・ タブだけで入力されていないか
以上2つの手順を踏むことで,
1)1文字でも文字列が存在するか,をチェックする
1.の1文字でも存在するかのチェックは,
テキストフィールドの文字列はvalメソッドで取得します。
テキストフィールドのvalue値取得
var txt = $('input').val();
console.log(txt);
文字列が存在するかのチェックは,
テキストフィールドのvalue値の長さ取得
var txtLength = txt.length;
console.log(txtLength);
これで文字数が取得できました。さらに,
文字列が存在しないまたは,
if(txt && txtLength>0){
console.log(txtLength); // ここで実行する
}else{
// ない場合は何もしない
}
2)半角スペース・全角スペース・改行・タブだけで入力されていないかのチェック
この4つのチェックには正規表現というものを使います。正規表現は文字列のパターンマッチングに使われるもので,
半角スペース・
if(txt.match(/^[ \r\n\t]+$/)){
console.log('err');
return false;
}