skillup

技術ブログ

デザイン

HTML5のinputタグのvalidatorについて

投稿日:

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。

必須入力のほかにも、telやemail、時間など様々なタイプのものがあります。

例えばinput type=”number”と入力すると数字しか入らないようになります。

個人的に便利だと思ったのは正規表現でしょうか。整数5桁+少数1桁の入力のみを受け付けたいとなった時に、numberですとうまくこれを制御できません。

そんなときに下記のように正規表現を入れてエラーチェックを行うことが出来たりします。

こうするとフォームの登録ボタンを押したときに、これらのエラーが出て、submitできないようになります。

参考リンク

inputタグの基礎
http://honttoni.blog74.fc2.com/blog-entry-138.html
http://www.tagindex.com/html5/form/input.html
JSとの比較など
http://labs.opentone.co.jp/?p=4730

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

GIMPでの薄膜レイヤー&縁取り

えー本業はプログラマなんですが、ガチンコ塾のブログの画像なんかもたまに作ってます。 まーほとんど素人なんですけどね(笑) 一応昔にPhotoshopとIllustratorは使ってました。今では忘却の …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …