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

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でバリデートしたい場合はこちらの過去記事を参照すること。