上の図に示すように、次の検証関数を実装する必要があります。
コントロールは必要なコントロールです
すべてが最大長を制御する必要があります
ページが初めて開かれたとき、コントロールをエラー状態として表示することはできません
入力コンテンツがクリアされた後、必要な入力制御をエラー状態として表示する必要があります
パブリッシュボタンは、すべての入力が有効になった後にのみ使用可能になります。
AngularJSを使用すると、これらの要件を簡単に実装できます。JSコードの1行のみが必要です。 UIスタイルはここでブートストラップを使用しています。サンプルコードから始めましょう。
HTML。
< src = "/scripts/angular.js"> </script> </head> <body> <div> < ng-class = "{'has success'：！createContactform.username。$ pristine && createcontactform.username。$ balid、 'has-error'：！createcontactform.username。$ pristine && createcontactform.username。 ng-model = "username" name = "username" autofocus = "" "必須ng-maxlength = 30> <div ng-show ="！createcontactform.username。 createcontactform.username。$ invalid "> <span> </span> </div> <！ - usermailのメールアドレス - > <div ng-class =" {'has success'：！createcontactform.usermail。$ pristine && createcontactform.usermail。 createcontactform.usermail。$ invalid} "> <label for =" usermail ">電子メールアドレス*</label> <入力タイプ=" ng-model = "usermail" name = "usermail" required ng-maxlength = 30> <div ng-show = "！createcontactform.usermail。 </div> <div ng-show = "！createcontactform.usermail。$ pristine && createcontactform.usermail。$ invalid"> <span> </span> </div> </div> <！ - subject-> <div ng-class = "{'has succes'： 'has-error'：！createcontactform.subject。$ pristine && createcontactform.subject。$ nivalid} "> <label for =" subject "> subject*</label> <input> <入力タイプ=" ng-model = " createcontactform.subject。$ valid "> <span> </span> </div> <div ng-show ="！createcontactform.subject。$ pristine && createcontactform.subject。 ！createcontactform.content。$ pristine && createcontactform.content。$ valid、 'has-error'：！createcontactform.content。$ pristine && createcontactform.content。 ng-maxlength = 1000> </textarea> <div ng-show = "！createcontactform.content。$ pristine && createcontactform.content。 <！ - [BUTTON]を送信 - > <div> <div ng-show = "createcontactform。$ balid"> <input inty = "image" src = "/content/comment_publish_button.png" onsubmit = "submit（）;" value = "publish" ng-disabled = '！createcontactform。$ valid'/> </div> <div ng-show = "！createContactform。$ valid"> <img src = "/content/images/invalid_publish_button.png"/> </div> </form> src = "/scripts/ftit/contactcreatecontroller.js"> </script> </body> </html>JSコード（本当に1行だけです）
ContractCreateController.js
var ftitappmodule = angular.module（ 'ftitapp'、[]）;
それはいいです。説明するいくつかの重要なポイント：
NGクラス：このタグは、クラスの値を制御するために使用されます。たとえば、ng-class = "{'has-success'：！createContactform.content。$ pristine}は、！createcontactform.content.content。
ng-show：コントロールが表示されるかどうかを制御します。
CreateContactform。$ valid：すべての検証が渡された後、値は真です。
createcontactform.content。$ valid：コンテンツコントロールが検証に合格し、真であるかどうかを識別します。
CreateContactform.Content。$ PRISTINE：コンテンツコントロールが入力されていないかどうかを特定します。それは真実として入力されることはありません、そうでなければそれは偽です
より詳細な技術的な問題については、Angularjsの技術文書を確認してください。