原文：[link](http://qiita.com/leedohyung-dba/items/ffa06bbb4f3da64a8086) ## 概要 HTML5から支援しているForm Validation、皆さんご存知ですよね。 非常に便利ですし、自分もHTML5に感謝しています。 サーバでは常にデータを検証するべきですが、追加のデータ検証をWebページ自身で行うことにも多くの利点があります。ユーザがフォームに入力している間にデータを検証することで、ユーザは何らかのミスをしたことを直ちに知ることができます。これはユーザが HTTP のレスポンスを待つ時間を減らし、またサーバで誤ったフォーム入力を扱うことがないようにします。  ### しかし、ドンー (OA O; ) ブラウザー別にメッセージが統一されず、実際の案件には、デメリットになっちゃったんです。 やっぱりHTML5 Form Validationに完全に依存されると気持ち悪いですね。 で、HTML5 Form Validationのメッセージを制御できる内容を書いておきたので、 以下の記事をご覧ください。 **-link-**[[JavaScript]HTML5 Form Validationの制御と注意事項](http://qiita.com/leedohyung-dba/items/b762e21018edc4d0387c) 意外と簡単にできますが、いくつかのケースを確認して見ると変な状態になります。 もし、他の記事に例を出しているコードをそのまま使って良い結果確認しても、 色んなケースをしっかり確認するべきです。 そうしないと、リリース後バグが出ちゃってしまうかもしれません。 また、せっかくなので、JavaScriptライブラリーを構築してnpmに上げました。 その内容は以下の記事をご覧ください。 [JavaScript]HTML Form Validation コントローラー ライブラリー fvc (準備中) この記事は、HTML5 Form Validationの紹介でございます。 ## データフォームの検証 HTML5 Form ValidationはHTML5の機能のひとつとして、 スクリプトに頼ることなくほとんどのユーザデータを検証できることがあります。 これはフォーム関連要素の検証関連属性で行われます。 その検証関連属性は以下の通りです。 #### <input>要素の検証制約 すべての<input>要素は、pattern 属性を使用して検証することができます。 この属性は値として、大文字・小文字を区別した正規表現を想定します。 要素の値が空ではなく、また pattern 属性で指定された正規表現にマッチしないとき、 その要素は不正であるとみなされます。 ```html <input type="text" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" name="textMail"> ```