HTML5　〜　入力値チェック機能を試してみた

今回試した入力値チェック機能は下記６つ。

いつものように、検証アプリを作成して試した。

http://wbs-newworld.appspot.com/html5studyValidation.html

使い方は非常に簡単だ。
textボックスやtextareaで、required属性による入力必須制約によるチェックを行う場合は、required属性をtrueにすればよい。

<input type="text" required="true">
<textarea required="true"></textarea>

コンボボックスで入力必須制約によるチェックを行う場合は、次のように書く。

 <select name="gender" required>
    <option></option>
    <option value="0">男性</option>
    <option value="1">女性</option>
  </select><br>

pattern属性による入力値のパターン制約によるチェックを行いたい場合は、pattern属性にチェックパターンを正規表現で記述する。
例えば、090-1234-5678という数値形式に限定したい場合は次のように書く。

  <input type="text" id="zipCode" name="zipCode" pattern="\d{3}-?\d{4}-?\d{4}">

type属性に応じた入力値のタイプ制約によるチェックを行う場合は、type属性に適当な値を指定する。
例えば、URLを入力させる項目の場合は、次のようにtype属性にurlを指定する。

 <input type="url" id="url" name="url">

step属性による入力値制約によるチェックも可能。
例えば、偶数だけを入力させたい場合は次のよう書く。

<input type="number" id="number" name="number" step=2>

min属性、max属性による入力値の範囲制約によるチェックも可能。
2011-03-01から2011-03-31の間の日付を入力させたい場合は、次のように書く。

  <input type="date" id="date" name="date" min="2011-03-01" max="2011-03-31">

maxlength属性による入力値の長さ制約による入力値チェックも可能。
HTML5では、textareaにもmaxlengthを使用できるようになったことが大きな進展だと思う。