pattern属性を使ってみる

input要素にpattern属性を設定して、ブラウザに標準で用意されているバリデーションを試してみます。

サンプルコード

pattern属性は正規表現で指定します。
例えば半角英数字のみ入力させたい場合、以下のような指定になります。

<input type="text" name="userid" pattern="^[0-9a-zA-Z]+$" placeholder="ユーザー名(半角英数字のみ)">

これで半角英数字以外を入力した状態でフォーム送信すると、エラーが表示されるようになりました。
半角英数字のみ入力させるデモページ

ただ上記の場合、未入力の状態だと送信できてしまします。
未入力の場合は送信させたくない場合、別途required属性を指定します。

<input type="text" name="userid" pattern="^[0-9a-zA-Z]+$" required placeholder="ユーザー名(半角英数字のみ)">

必須で半角英数字のみ入力させるデモページ

pattern属性はtype属性がtext以外でも特に問題なく使用できます。
例としてpasswordで設定してみます。

<input type="password" name="password" pattern="^[0-9a-zA-Z]{8,16}" placeholder="パスワード(半角英数字8～16文字)">

type passwordの場合も特に問題なく動作しました。
type passwordの場合のデモページ