勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法

  JavaScript

JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で検索したり過去に作成したソースコードを確認したりしていたがこれが面倒くさい。ライブラリで解決できないか調べたところ「validator.js」がバニラJSでも利用できる上、バリデート項目も多かった。以下にサンプルと利用方法をメモ。

 

サンプル

https://taitan916.info/sample/validator.js/

「バリデート」ボタンをクリックすると「未入力項目があります」等の文言が表示される筈。

 

validator.js

GitHub

https://github.com/validatorjs/validator.js

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/validator@13.12.0/validator.min.js"></script>

 

利用方法

ソースコード

個人的に普段よく使うメールアドレス、パスワード(半角英数字)、URLをバリデートするソースコードが以下になる。

<div>
    メールアドレス:<input type="text" name="mail" id="mail">
</div>
<div>
    パスワード:<input type="text" name="pass" id="pass">
</div>
<div>
    URL:<input type="text" name="url" id="url">
</div>
<button id="validator">バリデート</button>

<div id="alert"></div>

<script src="https://cdn.jsdelivr.net/npm/validator@13.12.0/validator.min.js"></script>
<script type="text/javascript">
document.querySelector('#validator').addEventListener('click', function() {
    const mail = document.querySelector('#mail').value;
    const pass = document.querySelector('#pass').value;
    const url = document.querySelector('#url').value;
    let msg = '';

    //未入力チェック
    if( validator.isEmpty(mail) || validator.isEmpty(pass) || validator.isEmpty(url) ) msg += `<div>未入力項目があります。<div>`;

    //Eメール形式チェック
    if( !validator.isEmail(mail) ) msg += `<div>メールアドレスがEメール形式になっていません。<div>`;

    //半角英数字チェック
    if( !validator.isAlphanumeric(pass) ) msg += `<div>パスワードは半角英数字のみでご入力ください。<div>`;

    //URLチェック
    if( !validator.isURL(url, { protocols: ['http','https'], require_protocol: true}) ) msg += `<div>URL形式になっていません。<div>`;

    document.querySelector('#alert').innerHTML = msg;
    return false;
});
</script>

その他のバリデートについて

日付や整数値チェック等、その他のバリデート項目についてはこちらのページを参照すること。

 

所感

PHPでバリデートしたい場合はこちらの過去記事を参照すること。

 - JavaScript

  関連記事

JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法

JavaScriptのalert / confirmはブラウザによって表示位置や ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...

JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...