手軽にhtmlでフォームの入力に文字数制限する方法【input pattern】
2016年4月6日
とっつぁん
この記事は 3 分くらいで読めると思います
お問い合わせの入力がみんなバラバラで気持ち悪い
コレって言ったらコレ！異論は認めません！！
フォームの入力欄に制限をかけて欲しいという依頼を頂いたので、ついでに備忘録にしておきます。
ちなみに頂いた内容は、
西暦を入力させたいテキストフィールドで「平成1年」等と入力しても送信出来てしまうので制限して欲しいという内容。
まぁ西暦しか認めない！という事なので半角数字の4桁でしか送信出来なければOKなわけですね。
input[pattern]要素
という事でもともとは普通のテキストフィールドだったフォームに、input[pattern]要素を使いました。
input[pattern]はhtml5から実装された要素で、入力欄を正規表現で規制出来るというものです。
書き方
<input pattern="正規表現">
書き方は簡単ですね、正規表現さえ分かれば。
エラーメッセージ
title属性をつければエラーメッセージとして表示されます。
コピペでOK、フォームの入力規制
とりあえず正規表現なんかよくわからん、コピペ出来れば良いんやで！
というワタクシみたいな人の為に色々書き方を並べておきます。
半角数字4桁
西暦を入力してほしい時とかの半角数字4桁以外認めません！
<input name="卒業年度" pattern="\d{4}" title="数字4桁でご入力ください。">
demo
半角英数字
半角英数字しか認めません！
<input pattern="^[0-9A-Za-z]+$" title="半角英数字でご入力ください。">
demo
数字のみ
半角数字しか認めません！
<input pattern="^¥d+$" title="数字でご入力ください。">
demo
半角アルファベットのみ
半角アルファベットしか認めません！
<input pattern="^[a-zA-z\s]+$" title="半角アルファベットでご入力ください。">
demo
全角ひらがなのみ
全角ひらがなしか認めません！
<input pattern="^[ぁ-ん]+$" title="全角ひらがなでご入力ください。">
demo
全角カタカナのみ
全角カタカナしか認めません！
<input pattern="^[ァ-ン]+$" title="全角カタカナでご入力ください。">
demo
半角ｶﾀｶﾅのみ
半角ｶﾀｶﾅしか認めません！
<input pattern="^[ｧ-ﾝﾞﾟ]+$" title="半角ｶﾀｶﾅでご入力ください。">
demo
携帯電話
携帯電話の番号しか認めません！
ハイフンありとハイフンなしで11ケタの数字に限定。
<input pattern="^\d{3}-\d{4}-\d{4}$|^\d{11}$" title="半角数字でご入力ください。 例：000-0000-0000もしくは00000000000">
demo
郵便番号
郵便番号の入力は半角数字でハイフン入れてないと認めません！！
<input name="sampleName" pattern="\d{3}-\d{4}" title="3桁の数字、ハイフン4桁の数字の順でご入力ください。">
demo
オマケ
フォームの入力にガチで制限かけると、誰もお問い合わせをしなくなります。
どうしてもお問い合わせしなければいけない事情が無い限りは
1回、2回注意されただけで「もうええわ！」となる人がほとんどです。
なので、ちょっと面倒だけどコンバージョン率の方が大事な場合は、
入力に規制をかけるべきではないし、内容確認画面なんか排除するべきだったりします。
POST COMMENTコメントを投稿する