Как показано на рисунке выше, нам нужно реализовать следующие функции проверки:
Управление требуется элементы управления
Все необходимо контролировать максимальную длину
При первом открытии страницы элемент управления не может быть отображен в качестве состояния ошибки
После очистки входного содержимого необходимого контроля ввода необходимо отобразить в качестве состояния ошибки
Кнопка публикации может стать доступной только после того, как все входы действительны.
С AngularJs мы можем легко реализовать эти требования, требуется только 1 строка кода JS. В стиле пользовательского интерфейса используется начальная загрузка здесь. Начнем с примера кода:
HTML.
<! Doctype html> <html lang = "zh-cn" ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> demo </tit src = "/scripts/angular.js"> </script> </head> <body> <div> <!-Основная область контента-> <div> <div> <!-Контакт сформной области-> <form action = "/contact/create" method = "post" role = "name =" createcontactform "ng-controller =" ContactCreatCreatecontrecontrolter "-ame amemermemermemer <>---namermemon amemermemermemermemermemermemer <>--namermemermemermemermemer->- ng-class="{'has-success' : !createContactForm.UserName.$pristine && createContactForm.UserName.$valid, 'has-error' : !createContactForm.UserName.$pristine && createContactForm.UserName.$invalid }"> <label for="UserName">Your name*</label> <input type="text" ng-model = "username" name = "username" autoFocus = "" требуется ng-maxlength = 30> <div ng-shef = "! createcontactform.username. $ pristine && createcontactform.username. $ valive"> <pran> </span> </div> <div ng-showorm.! createContactform.username. $ Invalid "> <pan> </span> </div> <!-Адрес электронной почты usermail-> <div ng-class =" {'has-success':! createContactform.usermail. $ pristine && createContactform.usermail. CreateContActform.UserMail. $ Invalid} "> <label for =" usermail "> адрес электронной почты*</label> <input type =" email "ng-model =" usermail "name =" usermail "требуется ng-maxlength = 30> <div ng-show ="! </div> <div ng-shef = "! createContactform.usermail. $ pristine && createContactform.userMail. $ Invalid"> <pan> </span> </div> </div> <!-субъект-> <div ng-class = "{'has-success':! createcontactform.subject. 'has-error' :! createcontactform.subject. $ pristine && createContactform.subject. $ Invalid} "> <label for =" Субъект "> субъект*</label> <input type =" text "ng-model =" субъект "name =" субъект "требуется ng-maxlength = 100> <div ng-shew ="! createContactform.subject. $ alloy "> <pran> </span> </div> <div ng-shef ="! createContactform.subject. $ Pristine && createContactform.subject. $ Invalid "> <pan> </span> </div> </div> <!-Контент-> <div ng-class =" ! createContactform.content. $ Pristine && createContactform.content. $ allo, 'Has-error' :! createContactform.content. $ pristine && createContactform.content. $ Invalid} "> <label for =" Content*</label> <TextArea = "4" Rows = "5" 5 "5" ng-contel "</label> <textarea =" 4 "rows =" 5 "ng-mod" </label> <textarea = "4" Требуется ng-maxlength = 1000> </textarea> <div ng-shef = "! createcontactform.content. $ pristine && createcontactform.content. $ value"> <pan> </span> </div> <div ng-shew = "! createContactform.content. </div> <!-кнопка отправки-> <div> <div ng-shef = "createcontactform. $ valive"> <input type = "image" src = "/content/images/comment_publish_button.png" onsubmit = "upport ();" value = "publish" ng-disablet = '! createContactform. $ Valid'/> </div> <div ng-shef = "! CreateContactform. $ alloy"> <img src = "/content/images/vvalid_publish_button.png"/> </div> </form> </div> </div> src = "/scripts/ftit/contactcreatecontroller.js"> </script> </body> </html>JS -код (на самом деле только одна строка)
ContractCreateController.js
var ftitappmodule = angular.module ('ftitapp', []);Это нормально. Несколько ключевых моментов, чтобы объяснить:
NG-Class: этот тег используется для управления значением класса. Например, ng-class = "{'has-success' :! createcontactform.content. $ Pristine} означает, что если значение! CreateContactform.content. $ Priseine-это правда, значение класса является.
NG-SHOW: управляет тем, отображается ли элемент управления.
CreateContActform. $ Valid: после того, как все проверка передается, значение верно, в противном случае оно неверно
createContactform.content. $ value: определяет, проходит ли контроль контента проверку, передает true, в противном случае это ложь
createContactform.content. $ Prisine: определяет, не вводится ли контроль контента. Это никогда не вводится как истинно, иначе это ложь
Для получения более подробных технических проблем, пожалуйста, проверьте техническую документацию AngularJS.