bl6.jpホームニュースレビューお出かけアプリウェブサイトMacカメラレタッチTips雑記bl6.jpファッション、写真、旅行、ガジェットなどの備忘録menuホームJavaScriptHTML5のinput属性による検証ができるフォーム実装「Validatr」JavaScript2017.07.21HTML5のinput属性による検証ができるフォーム実装「Validatr」Validatrは、HTML5のinput属性を用いて検証できるさまざまなフォームを実装することができます。Emailをはじめ、Color、Date、Number、Range、URLと、いろんな各タイプの属性が用意されています。Validatr下記のページから、Validatrの実際のデモ動作をチェックできます。ValidatrEmailと書かれたボックスに、メールアドレスを入力してSubmitをクリックすると、入力されたデータを元にいろいろと検証されているのが分かると思います。メールアドレス内に「@」が入力されていないと、「メールアドレスに「@」を挿入してください......」などといったメッセージが画面に表示されます。Valid!」と表示されます。input要素のtype属性にemailを設定すると、このようにその属性に合わせてしっかりと適切な検証が実行されるという仕組みです。記述するコードやマークアップもシンプルで、とても手軽に使用できそうですね。input要素のtype属性には他にも、Color、Date、Number、Range、URLといったものがあります。各type属性のデモや属性の詳細などは、下記のページからチェックできます。Validatrmin、max、date-format、multiple、patternなどなど、各type属性に応じてさまざまな属性が用意されています。オプションには、dateFormat、location、position、showall、template、theme、validといった項目のセッティングもできるので、カスタマイズして使いたい人にもうれしいですね。他にも、メッセージの入力やカスタムテストの実装なんかも可能なので、気になる人はぜひチェックしてみてください。いうわけで、HTML5のinput属性を用いた検証ができる「Validatr」のご紹介でした。Validatrの詳細やダウンロードは、下記からどうぞ。最近はよくjQueryプラグインを使ったりすることが多くなってきたので...検索:プロフィールbl6.jp心がときめく「モノ」や「コト」を中心に紹介しています。レビューや日記なんかも。フレール」という紅茶の専門店があり、...2020.01.27逆さでも使えるサンワのLEDつき充電式電動エアダス...サンワサプライからガス不使用で環境にやさしい充電式電動エアダスター「CD-ADE...2020.01.24銀座の無印で朝食→大人のジャムパン(月と花)→松濤...この日のスタートは銀座から。WAIT...昨日の東急プラザの続き。一日中渋谷で遊んでいたらすっかり夜になってしまった。