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でバリデートしたい場合はこちらの過去記事を参照すること。
関連記事
-
Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...
-
JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法
JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...
-
JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方
あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...