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でバリデートしたい場合はこちらの過去記事を参照すること。
関連記事
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法
先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...
-
-
ローソク足のグラフをJavaScriptで描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...