サンプルコード

サンプルコード前半の 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

参考資料