デザイナーTweetAngularJSは一昨年2012年にリリースされ、去年2013年に注目が集まり始めた、Googleを中心に開発されているJavaScripフレームワークです。今一番広く使われているJavaScripライブラリのjQueryとは、使い方が基本的に異なっています。必要に応じてJavaScriptを記述し、モジュールのひも付けや、値の指定等を行います。そのため、AngularJSを使った記述は、WordpressのようなCMSをつかって、テンプレートの記述を行う感覚に近いです。そのため、HTMLを見ただけでも、ある程度どのような動きをさせようとしているのかを読み取ることができるのが、AngularJSの特長の一つとなります。今回は、このAngularJSを使い、バリデーション付きの入力フォームを作ってみました。↓こちらが作ってみたものDEMO作り方1.「AngularJS」の読み込みまずは、他のJavaScriptライブラリと同様に、JavaScriptファイルの読み込みを行います。APIを使って読み込む方法があります。今回作ったフォームでは、私自身はJavaScriptの記述を一切行っておりません。必須項目の確認のみが必要な、名前の記述からご紹介します。([formのname].[対象のinputのname].$valid)これで、必須項目のバリデーションができます。つづいて、E-Mailアドレスの記述です。E-mailでは、正規表現を使ったテキストパターンの確認を行います。必須項目の設定等は先ほどと同じで、正規表現を使ったテキストパターンの確認を以下の手順で行います。ng-pattern属性で、正しいテキストパターンの正規表現を設定する。([formのname].[対象のinputのname].$error.patternの形式)これでメールアドレスのテキストパターンのバリデーションができます。つづいてパスワードの記述です。文字数が制限内にあるか確認します。「パスワードを表示する」というチェックボックスにチェックを入れると、パスワードが表示されるようにします。対象のinputタグに、ng-show属性で”!showPassword”を設定(パスワードの記述を伏せます)ng-minlength属性で最小の文字数を、ng-maxlength属性で最大の文字数を設定します。([formのname].[対象のinputのname].$error.maxlengthの形式)パスワードを表示するのチェックボックスのng-model属性で”showPassword”を設定あと、入力された名前を表示することもできるようでしたので、その機能もつけてみました。class="bold">{{userLastName}}</span>さん。class="bold">{{userLastName}}</span>さん。</span>苗字のinputで設定しているname属性の値を{{userLastName}}というかたちで記述することで、inputに入力された値がリアルタイムでこちらに表示されるようになります。最後に、form内の全てのフォームがOKになったとき以外は、登録ボタンが使えない状態にする記述をします。ng-disabled="userInfo.$invalid">登録ボタンのinputタグにng-disabled属性で”userInfo.$inbalid”という記述をすることで、フォーム内全てがOKになるまで、ボタンが使えなくなります。必要に応じて使い分けるといいと思います。ProfileninomiyaWebデザイナー兼コーダーです。イラストを描くのも好きです。SVGとCanvasを使ったWEBアプリにも興味があります。