HTML5のフォーム patternで記号を入力禁止にしたい

Question

前提・実現したいこと

HTML5で入力フォームを作っています。

<form action="https://localhost/api/regist_pre" method="post"> 名前：<input type="text" name="name" size="40" pattern="^[/#&?%.\-+_=]" required><br> <input type="submit" value="送信"> </form>

何か正しい記述方法あれば教えてください。
@や半角スペースなども禁止にしたいです。

逆にOKの文字は以下です。
・数字
・半角、全角の英数
・半角、全角の日本語

Answer 1

何か正しい記述方法あれば教えてください。

@や半角スペースなども禁止にしたいです。

まずは、ホワイトリスト（この文字だけ受け付ける）でいくかブラックリスト（この文字は禁止する）にするかを決めましょう。それから、必要な文字をリストアップしてください。

---

詳しい設計がわからないのでなんとも言えませんが、英数字の名前を受け付けるのにスペースを除外するのも不自然な設計だと感じました。

Comments

[tetujapan]

ありがとうございます。参考にしてみます。

Answer 2

この辺を参考にすればいいと思います。
http://www-creators.com/archives/5187#i-3
http://www-creators.com/archives/1827#i

Comments

[tetujapan]

回答ありがとうございます。

<input type="text" name="name" size="40" pattern="[ぁ-んァ-ヶ亜-熙０-９a-zA-Z0-9\-]+" required>

このような形にしてひとまずは、やりたい事をクリアできました。
ただ、漢字が一部しか入力できず、いろいろ調査しているところですが、解決に至っていません。

[tetujapan]

[ぁ-んァ-ヶｦ-ﾟ一-龠０-９a-zA-Z0-9\-]+

できました！

ありがとうございました。

Answer 3

<input type="text" name="name" size="40" pattern="[ぁ-んァ-ヶｦ-ﾟ一-龠０-９a-zA-Z0-9\-]+" required><br>

このような形にしてひとまずは、やりたい事をクリアできました。

Comments

[querykuma]

^[/#&?%.\-+_=]を見ますと否定文字クラスのパターンをしようとして失敗したのではないかと思いました。
http://www-creators.com/archives/4278#i-14
pattern="[^/#&?%.\-+_=@ ]+"とすればいいと思います。