`ng-pattern`

HTML5ではinputタグに対して様々な値チェック機構を標準で備えている。

特に、inputタグの属性typeを指定すると、一部のtypeに対しては HTML5標準の入力規則が適用される。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>input test</title>
</head>
<body ng-controller="myController">
  <form id="formExample">
    <!-- 電話番号 -->
    <input name="inputTel" type="tel"/>
    <div ng-show="formExample.inputTel.$error.tel">電話番号入力エラー</div>
    <!-- URL -->
    <input name="inputUrl" type="url"/>
    <div ng-show="formExample.inputUrl.$error.url">URL入力エラー</div>
    <!-- メールアドレス -->
    <input name="inputEmail" type="email"/>
    <div ng-show="formExample.inputEmail.$error.email">メールアドレス入力エラー</div>
  </form>
</body>
</html>

'use strict'

angular.module("myApp", [])
.controller('myController', [ function(){
    $scope.formExample. = document.formExample;
}]);

このように標準でも入力チェックの仕組みが用意されているが、よりアプリケーションに特化した入力を指定したい場合、ng-patternによって正規表現を使ったバリデーションを行うことができる。

<!-- 8~20文字のパスワードのみを受け付ける例 -->
<input name="inputPassword" type="password" ng-pattern="/^[0-9a-z]{8,20}$/"/>
<div ng-show="formExample.inputPassword.$error.pattern">パスワードは半角英数字８〜２０文字で入力</div>