HTML5 の pattern 属性で全角英数と半角ｶﾀｶﾅを排除するバリデーションの正規表現サンプル

8550 ワード
JavaScript 正規表現 Validation unicode HTML5 JavaScript テキストリンク

サンプルコード

サンプルコード前半の input 要素にて、全角英数と半角ｶﾀｶﾅを排除するバリデーションを実施。
サンプルコード後半の script 要素にて、排除する範囲の文字を表示。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>The pattern attribute</title>
</head>
<body>
  <form method="get">
    <input
      type="text"
      name="foo"
      size="32"
      title="全角英数と半角ｶﾀｶﾅは入力不可"
      placeholder="ｱｲｳｴｵ１２３４５"
      pattern="^[^\uFF10-\uFF19\uFF21-\uFF3A\uFF41-\uFF5A\uFF61-\uFF9F]*$"
      required
    >
    <input type="submit" value="送信">
  </form>

<script>
document.write('全角数字: ');
for(let c=0xFF10; c<=0xFF19; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
document.write('全角英字(大文字): ');
for(let c=0xFF21; c<=0xFF3A; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
document.write('全角英字(小文字): ');
for(let c=0xFF41; c<=0xFF5A; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
document.write('半角カタカナ: ');
for(let c=0xFF61; c<=0xFF9F; c++){
  document.write(String.fromCodePoint(c));
}
document.write('<br>');
</script>
</body>
</html>

実行結果

実行環境: macOS Catalina + Google Chrome 79.0.3945.130

入力前の表示

未入力で送信ボタンを押した場合

排除する文字が含まれている状態で送信ボタンを押した場合

この例では title 属性で指定したテキストも表示されているが、このあたりの表示デザイン等はブラウザ依存になっている。「指定されている形式で入力してください。」が他のブラウザでは異なる文言になっていたり、「全角英数と半角ｶﾀｶﾅは入力不可」というテキストが表示されなかったりするので注意。

排除する範囲の文字

今回のバリデーションで排除する文字の一覧 (サンプルが script 要素で出力している内容)。

全角数字: ０１２３４５６７８９
全角英字(大文字): ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
全角英字(小文字): ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ
半角カタカナ: ｡｢｣､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ

Unicode コードポイントによる範囲。

  • 全角数字: 0xFF10 〜 0xFF19
  • 全角英字(大文字): 0xFF21 〜 0xFF3A
  • 全角英字(小文字): 0xFF41 〜 0xFF5A
  • 半角カタカナ: 0xFF61 〜 0xFF9F

参考資料