自作の入力値検証ルールを実装する - UI Validate
別稿「AngularJSで、入力フォームを簡単にチェックできるディレクティブを使う」で紹介したように、AngularJSでは、標準でもさまざまな検証機能が提供されています。ただ、実際のアプリでは、標準の検証ルールだけでは賄えないようなルールも多々あります。
そのようなアプリ独自の検証ルールを実装するのが、UI Validateの役割です。Bowerを利用することで、以下のコマンドでインストールできます。
> bower install --save angular-ui-validate
まずは、UI Validateの具体的な例として、パスワードとパスワード（確認）が等しいかどうかをチェックしてみます。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）validate.jsをインポート -->
<script src="bower_components/angular-ui-validate/dist/validate.js"></script>
<script src="scripts/validate.js"></script>
</head>
<body ng-controller="MyController">
<form name="regist" novalidate>
<div>
<label for="password">パスワード：</label><br />
<input id="password" name="password" type="password"
ng-model="user.password" /> </div>
<div>
<label for="password_confirm">パスワード（確認）：</label><br />
<!-- （3）検証関数を指定 -->
<input id="password_confirm" name="password_confirm" type="password"
ng-model="password_confirm"
ui-validate="'confirm($value, user.password)'"
ui-validate-watch="user.password" />
<!-- （5）エラーメッセージを表示 -->
<span ng-show="regist.password_confirm.$error.validator">
パスワードとパスワード（確認）が、異なります。</span>
</div>
</form>
</body>
</html>
// （2）ui.validateモジュールへの依存関係を
angular.module('myApp', [ 'ui.validate' ])
.controller('MyController', ['$scope', function($scope) {
// （4）入力値と比較対象とを比較する検証関数
$scope.confirm = function(input, compared) {
return input === compared;
};
}]);
UI Validateを利用するには、ライブラリ本体（validate.js）をインポートした上で、アプリモジュール（myApp）からはui.validateモジュールへの依存関係を宣言します（2）。
これでUI Validateが有効になりましたので、検証対象の要素に対して、ui-validate属性で検証関数を指定します（3）。検証関数には、ここでは検証の対象値（$value）と比較する値（user.password）を渡します。あとは、両者が等しいかどうかを比較し、一致しない場合は検証エラーとします（4）。UI Validateでは、検証関数がfalseを返した場合にエラーと見なします。
ui-validate-watch属性は、指定された式（ここでは、user.password）を監視し、その値が変更されたタイミングで検証を実施します（3）。デフォルトでは検証対象の要素だけを監視対象としますが、このように複数の要素に跨った検証では、ui-validate-watch属性で明示します。
検証結果によってエラーメッセージを表示しているのが（5）です。UI Validateでは、「フォーム名.要素名.$error.validator」で検証結果（true／false）を参照できます。
複数の検証ルールも適用可能
ui-validate属性に「検証名: 検証関数」のハッシュを与えることで、複数の検証ルールをまとめて指定することも可能です。以下は、先ほどのリスト5をハッシュ形式で書き換えたものです（もちろん、この場合はひとつしか検証ルールを指定していませんので、敢えてハッシュとする意味はありません）。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-validate/dist/validate.js"></script>
<script src="scripts/validate_hash.js"></script>
</head>
<body ng-controller="MyController">
<form name="regist" novalidate>
<div>
<label for="password">パスワード：</label><br />
<input id="password" name="password" type="password"
ng-model="user.password" /> </div>
<div>
<label for="password_confirm">パスワード（確認）：</label><br />
<input id="password_confirm" name="password_confirm" type="password"
ng-model="password_confirm"
ui-validate="{ cmp_pass : 'confirm($value, user.password)' }"
ui-validate-watch="user.password" />
<span ng-show="regist.password_confirm.$error.cmp_pass">
パスワードとパスワード（確認）が、異なります。</span>
</div>
</form>
</body>
</html>
ハッシュで指定した場合には、検証結果も「フォーム名.要素名.$error.検証名」の形式で参照しなければならない点に注意してください（ここでは「regist.password_confirm.$error.cmp_pass」です）。
まとめ
以上、本稿ではアプリを開発する上で欠かせないWeb Storageの操作、イベントリスナー／検証ルールの定義を支援するライブラリについて紹介しました。次回は引き続き、これまでの連載の中で扱えなかった小粒なライブラリについて解説する予定です。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
