WEBサービス創造記

WEBサービスを作ったり保守したりしてる人のメモブログです。

JavaScriptでの入力データのバリデーション

      2014/11/16

バリデーションを行えるJavaScriptライブラリ

エンドユーザが入力したデータの書式が正しいかどうかを判別するバリデーターをJavaScriptで実装したいと思ったときにおすすめなのが Validate.js です。

Validate.js は以下のページでダウンロードできます。

http://www.mutationevent.com/projects/validate.js/

Validate.jsの使い方

フォームの入力データを検証する

以下のソースをブラウザで開いてフォームを送信してみてください。
フォーム送信時に入力データの検証が行われ、データの書式が期せぬものである場合はアラートが出てフォームが送信できません。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Validate.js デモ</title>
    <script type="text/javascript" src="./js/validatejs.js"></script>
    <script type="text/javascript">
        var validator = new Validate();
        validator.addRules({id:'myid',option:'required',error:'IDは必ず入力してください。'});
        validator.addRules({id:'myemail',option:'email',error:'メールアドレスの書式が不正です。'});
        validator.addRules({id:'myurl',option:'url',error:'URLの書式が不正です。'});
    </script>
</head>
<body>
<form id="myform" method="post" action="" onsubmit="return validator.Apply()">
    ID(必須):
    <input type="text" name="myid" id="myid" size="20" value="" /><br>
    EMAIL:
    <input type="text" name="myemail" id="myemail" size="40" value="" /><br>
    URL:
    <input type="text" name="myurl" id="myurl" size="40" value="" /><br>
    <input type="submit" value="送信" />
</form>
</body>
</html>

なんとなくわかると思いますが、一応以下に設定の要点の覚書をしておきます。

<script type="text/javascript" src="./js/validatejs.js"></script>
<script type="text/javascript">
    var validator = new Validate();
    validator.addRules({id:'myid',option:'required',error:'IDは必ず入力してください。'});
    validator.addRules({id:'myemail',option:'email',error:'メールアドレスの書式が不正です。'});
    validator.addRules({id:'myurl',option:'url',error:'URLの書式が不正です。'});
</script>

HTMLヘッダ内でValidate.jsを読み込みます。
インスタンスを生成したら、バリデーションルールの定義を行います。

ルールの定義はaddRulesメソッドで行います。
id:には、要素のIDを、option:ではバリデーションの種類を、error:ではバリデーションが通らなかったときに出力されるエラーメッセージを定義します。

バリデーションルールの定義をしたら、バリデーションの対象とするform要素を指定します。

<form id="myform" method="post" action="" onsubmit="return validator.Apply()">

上記のようにform要素のonsubmit属性に”return validator.Apply()”を指定している箇所があります。
これにより、form#myform で先ほど定義したルールによるバリデーションが有効になります。

任意の入力データを検証する

Validate.jsの利点は、フォームと連動しなくても特定の箇所だけチェックする際にも利用しやすいことです。

以下のソースをブラウザで開くと、”不正な書式のURLです。”というメッセージが表示されます。

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Validate.js デモ</title>
    <script type="text/javascript" src="./js/validatejs.js"></script>
    <script type="text/javascript">
        var validator = new Validate();
        var hoge = 'http://domain';
        //var hoge = 'http://domain.tld';
        document.open();
        if (validator.isURL(hoge)) {
            document.write("正しい書式のURLです。");
        } else {
            document.write("不正な書式のURLです。");
        }
        document.close();
    </script>
</head>
<body>
</body>
</html>

isURLメソッドは、引数として与えられた文字列の書式がURLかどうかを確認し、書式が正しい場合は真を、不正な場合は偽を返します。
他にもメールアドレスの書式が正しいかどうかを確認するisEMailAddrメソッドや数値であることを確認するisNumメソッドがあります。
Validate.jsのソースを見てみると、様々なメソッドが存在していることがわかっておもしろいです。

 - jQuery ,