AngularJSでフォーム入力を検証しよう

メールアドレスとバスワードの設定

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
input要素入力するメールアドレスのデータ形式とパスワードの文字数を確認します。
講師:
06:44

字幕

このレッスンでは フォームの中のメールアドレスと パスワードについて input 要素に入れたデータの チェックを加えたいと思います 今のところまだ この2つの input 要素については AngularJS のチェックを加えてありません けれどもその上の名前ですね 姓と名については チェックがしてあります どんなチェックかというと まずフォームは myform という 名前がついているんですけれども その中の名の方ですね firstname に対して ng-show のディレクティブが 加えられています この firstname に入力がない― しかも入力をしようとして タッチしたクリックしたという場合には 名前を入れてくださいという 注意書きを表示するということです 姓の方も同じ設定になっています ここですね そしてこのような設定をする場合には ng-required のディレクティブが 設定されていて それを true にするということが 必要になっています firstname の方も当然同じ設定です では現在の状態を確認してみましょう ファイル>ブラウザーでプレビュー をします 入力フォーム 始めは何も注意書きがありません けれども名前を入力せずに メールアドレスに飛んでしまったというと 「名を入力してください」 というふうに出てきます 入力しましょう そして姓に飛びました Tab で飛ばしたんですけれども もう1回 Tab で姓を入れずに メールアドレスに行ってしまうと やはり同じ設定になっていますので 入力をしないといけないということです メールアドレス パスワードの方は 設定が加えられていないので 新たに AngularJS のディレクティブで 入力した内容 データを チェックするようにしたいと思います まずはメールアドレスの方から行きましょう Dreamweaver のビューの設定を コードにしてコードを見やすく広げます email の所 これは name="email" という input 要素ですね ここに同じように注意書きを加えたいので まずは lastname 姓の方の設定 p 要素ですね これをコピーして持ってきてしまいます 必要な変更を加えようということですが まずはこの名前が違いますね email なのでコピーして ペースト それから2つ目の条件も同じように ペーストします テキストも打ち直します メールアドレスを正しく入力してください というふうにします ではこれで保存して確認しましょう ブラウザーでプレビューです もう姓名はいいので いきなりメールアドレスにいきます 入力をします こんなアドレスないですよね @マークがないといけないです @マークがあるんだったら そのあとに何か続くでしょうということで このままではまだ駄目です ドットで終わっても駄目なので こういうふうに入力をすると ちゃんと消えてくれます これは JavaScript で書こうとすると 正規表現などを使った 結構面倒な処理なんですけれども AngularJS ですとこのように ディレクティブの設定だけで チェックが行われてしまうということで なかなかの優れ物ですね 次にパスワードの方も設定しましょう パスワードの方は文字数制限 ということにしたいと思います 文字数があまり少ないと パスワードとして危険ですので 6文字以上としたいと思います それはまず input 要素の方に ディレクティブとして設定をしておきます ng-minlength です そして文字列で つまりダブルクオーテーションで囲んだ上で では6文字にしましょう 6文字なかったら駄目ですよということです そしてパスワード 名前ですね これをコピーして ペースト ペースト テキストを書き変えましょう 「パスワードは6文字以上にしてください」 と入力します パスワードのディレクティブの g が抜けていますね minlength minimum length ですね 保存をして確認しましょう ブラウザーでプレビューです パスワードをタッチ クリックして2文字だけ入れて 別の所に飛びます そうすると6文字以上にしてくださいと 出てきますので おとなしく6文字入れましょう 6文字入れた所で消える ということで 正しく動作しました このレッスンでは input 要素の メールアドレスとパスワードのデータを AngularJS のディレクティブで チェックをしました メールアドレスについては形式が メールアドレスになっているということですね その場合には $invalid と $touch の ディレクティブの条件の設定を ng-show にしただけで アドレスとしての形式をきちんと チェックしてくれるということでした それから新たに ng-minlength というプロパティで 最小の文字数というものが設定できました ここでも $invalid と $touched の 2つの条件の設定で パスワードとしての最小の入力文字数を チェックすることができたということです

AngularJSでフォーム入力を検証しよう

AngularJSはHTMLを拡張するフレームワークです。Webページを動的に操作することができます。このコースではCSSとJavaScriptの基礎を学んだ方向けに、AngularJSを使った入力フォームの処理の仕方について解説します。インストール方法や動作確認、テキストの表示やデータ形式のチェック、入力に応じたスタイルの変更などをひと通り説明します。

1時間12分 (13 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年04月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。