Web系の仕事しているのに、HTMLも知らないの？という、非エンジニアの人。
または、バックエンドやってるから、HTMLやらフロント系のコードはわかりません、というエンジニアの人。
HTMLをナメてもらっては困りますね。
CSSも去ることながら、HTMLってものすごく高度になってきているので、これから学習し始める人は、なかなかに難易度が高くなっていると言っても過言ではありません。
そんな中、HTMLで正規表現が使えてしまうということを、仕事を通して知ってしまいました。
もちろん、リファレンスサイトなどを読めばバッチリ書いてあることなんですが、恥ずかしながら自分、Web系のエンジニアを10年以上やっていながら、今更ながら初めてこの機能を使った事での気付きをブログに残しておきたいと思います。
INPUTタグの入力バリデーションでの正規表現
HTMLの一体どこで正規表現的なものを使うのかというと、入力フォームのバリデーションチェックです。
いや〜過去にJavascriptでゴリゴリと作っていた入力値チェックが、HTMLだけでできてしまうなんて、ビックリ仰天すぎますね。
ちなみに、
正規表現が何かわからない人に一言で説明すると、
「文字列が正しいかどうか判定する書式」
コレです。
でも、HTML5になって、inputタグにも、type属性が拡張されて、HTML4以下では、文字列判定のtypeは、passwordぐらいしかなかったものが、
number,email,date,colorなどが加わって、ブラウザによっては、ダイアログなども表示されて便利この上無い機能になっていたんですが、
個別の細かな文字列チェックをしたい場合にはまだまだjavascript判定をしないといけないと思い込んでいたんですよ。
それが、次の様にpattern属性を記述すると、間違いチェックができちゃうんですね。
数字以外を入れるとエラーになるpatternデモを作ってみました。
ソース
<input type="text" name="demo" pattern="\d+" />
<style>
input[name="demo"]{
border:2px solid blue;
padding:5px;
outline:none;
}
input[name="demo"]:invalid{
border-color:red;
}
</style>
デモ
色々なパターンでの正規表現集
input typeにあるものも、type="text"で対応できるように、下記に追加しておきました。
よく使う系のパターンを集めてみました。
数値のみ
\d+
ひらがなのみ(ー：全角ハイフン含む)
[あ-んー]+
カタカナのみ(ー：全角ハイフン含む)
[ァ-ンヴー]+
郵便番号（-ハイフン有無どっちも可）/
\d{3}-?\d{4}
電話番号（-ハイフン有無どっちも可）
\d{2,4}-?\d{3,4}-?\d{3,4}
メールアドレス
[a-z0-9._%+\-]+@[a-z0-9\.\-]+\.[a-z]+
年月日(年-月-日)
\d{4}-\d{2}-\d{2}
時間(時-分-秒)
\d{2}:\d{2}:\d{2}
EFOに思う事
日本で最初に郵便番号を入れたら住所が自動入力するシステムをSaaSサービスで作った男として、今時のEFOに対してひとこと言いたい。
半角カタカナ、全角数値は、もう使うのやめませんか？と・・・
これらの文字列は、正規表現で判定はできますが、そもそもスマートフォンでの入力が困難であったり、
パソコン不慣れな人は、入力が極めて難しいという事に気がついていないWebサイトがまだ世の中に点在しています。
特に、公的サイトや、金融機関の入力で未だにこうしたUIが無視されている傾向が高いという事にも残念に思っています。
もしどうしても半角カタカナじゃなければいけないのであれば、全角カタカナを自動的に半角カタカナに変換（全角数値も同様）して差し上げるべきじゃないでしょうか？
今だに、ガラケーの時の仕様で変更ができていない、平成初期のWebサイトがまだまだ多いですよという、啓蒙思想です。
あとがき
え？正規表現がまるでわからないので、今回のブログの意味がワケワカメですって？？？
そんな人は、正規表現をググってみてください。
これを言っているのがエンジニアだとすると、勉強不足なので即刻学習した方がいいですよ。
あと、先日ブログで書いた、入力フォームの書き方と合わせて使ってもらえると、もはやプログラミングしなくても、EFOがWebサイトで搭載できてしまうという、恐ろしい自体です。
[CSS] 今時の入力フォームバリデーションUI
Web業界、この事に気がついている人が、どの程度いるんでしょう？
EFO会社、驚愕せよ！
参考
mdn web docs: HTML 属性: pattern
HTML5におけるinput要素のpattern、type属性のおさらい
[HTML] INPUTタグのpattern属性の正規表現サンプル
0 件のコメント:
コメントを投稿