フォーム入力制約バリデーション

HTML5から入力制約バリデーションが強化されている。
これにより入力値のチェックが容易にできるようになっている。

入力制限が伴う属性
属性名 説明
maxlength 最大文字数を指定する。　例<input type=”text” maxlength=”20″>
required 入力必須を指定する。　例<input type=”text” required>
pattern パターンを正規表現で指定する。　例<input type=”text” pattern=”¥d+”>
min 最小値を指定する。　例<input type=”range” min=”1″>
max 最大値を指定する。　例<input type=”range” max=”100″>
step 指定可能な数値の刻みを指定する。　例<input type=”range” step=”0.1″>
入力制約を使ったソースコード 
<form>
 <input type="text" id="number" value="" title="数値" pattern="\d+">
 <input type="botton" id="send" value="送信">
</form>
<script type="text/javascript">
window.addEventListener("load", function() {
  var send_el = document.querySelector("#send");
  send_el.addEventListener("click", function() {
    var input_el = document.querySelector("#number");
    var valid = input_el.checkValidity();
    if(valid === false){
      alert(input_el.validationMessage);
    }
  },false);
},false);
</script>

入力制約のサンプル