7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Unicode全角カタカナ正規表現で長音符を含める方法

Last updated at Posted at 2016-04-05

##ご挨拶
Qiita初投稿です。普段Facebookにいろいろ書くことが多いですが、そちらでは技術系の投稿に反応がまったくないのでQiitaを始めてみることにしました。半分メモ代わりです。

さて、今回は、最近仕事でエントリーフォームを作っていて気がついたフロントエンドのTipsネタです。

全角カタカナ正規表現

HTML5でFormの入力エラーチェック(バリデーション)に使うpattern属性はなかなか便利ですが、2016年現在「正規表現 カタカナ」といったキーワードでググると、下記のように書くべしという情報が多く出てきます。

<input type="text" id="name_kana" required pattern="[\u30A1-\u30F6]*"/>

確かに大半の日本人の名前だけを考えるならばこれでいいのですが、この書き方だと**長音符「ー」**が含まれないので、長音符が入る外国人の名前などのバリデーションに不都合が生じます。

360af5b3bd82bedc9f4738d8c55322f3.jpeg

「リリー・フランキー」アウト!「所ジョージ」もアウト!

全角カタカナ正規表現に長音符を含める方法

これではいけないので、pattern部分を以下のように書き換えます。

        <input type="text" id="name_kana" required pattern="[\u30A1-\u30FC]*"/>

こうすれば、長音符が含まれるようになるので、無事にバリデーション出来るようになりました。

余談

なお日本語のために割り当てられた Unicode 一覧はこちら。
見たことない文字がいっぱいあります。「ヿ」はなんと読むのでしょうか...。

7
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?