Como mostrado na figura acima, precisamos implementar as seguintes funções de verificação:
Controles são controles necessários
Todos precisam controlar o comprimento máximo
Na primeira vez em que a página é aberta, o controle não pode ser exibido como um estado de erro
Depois que o conteúdo de entrada é limpo, o controle de entrada necessário precisa ser exibido como um estado de erro
O botão Publicar só pode ficar disponível depois que todas as entradas são válidas.
Com o AngularJS, podemos implementar facilmente esses requisitos, apenas 1 linha de código JS é necessária. O estilo da interface do usuário usa Bootstrap aqui. Vamos começar com o código de amostra:
Html.
<! Doctype html> <html lang = "zh-cn" ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> demonstra </title> <link href = "/content/bootstrap.css" Rel = "Stylesheet"/Script " src = "/scripts/angular.js"> </script> </head> <body> <div> <!-área de conteúdo principal-> <div> <div> <!-entre em contato com a área de formulário-> <formato action = "/contact/create" MethodCratctrEnTrengrengTreCrenTreCTReCTRECTRECTRECTRECTRECTRECTROMENTETROTCOLTRECTROTCOLTROTCOLTROTCOLTROTCOLT: ng-class = "{'has-success' :! createContactform.username. ng-model = "nome de usuário" name = "nome de usuário" autofocus = "" exigido ng-maxlength = 30> <div ng-show = "! CreateContactForm.username. $ inválido "> <pan> </span> </div> <!-endereço de email usermail-> <div ng-class =" {'has-success' :! CreateContactForm.Usermail. CreateContactForm.Usermail. $ inválido} "> <Label para =" Usermail "> Endereço de email*</etiqueta> <input type =" email "ng-model =" userMail "name =" usamail "necessários </div> <div ng-show = "! CreateContactForm.Usermail. 'Has-Error':! CreateContactForm.Subject. $ Pristine && CreateContactForm.subject. $ inválido} "> <Label para =" sujeito "> sujeito*</label> <input type =" text "ng-model =" sujeito "" Nome "" "Subject ng-maxlength = 100> <D". CreateContactFform.subject. $ válido "> <pan> </span> </div> <div ng-show ="! CreateContactForm.subject. ! CreateContActForm.Content. $ Pristine && CreateContactForm.Content. $ Valid, 'Has-Error' :! CreateContactForm.Content. $ Pristine && CreateContactForm.Content. ng-maxLength = 1000> </sexttarea> <div ng-show = "! <!-Botão de envio-> <div> <div ng-show = "CreateContactForm. $ Valid"> <input type = "imagem" src = "/content/imagens/comentário_publish_button.png" OnsubMit = "submmit ();" value = "Publish" ng-Disabled = '! CreateContactForm. $ Valid'/> </div> <div ng-show = "! src = "/scripts/ftit/contactCreateController.js"> </sCript> </body> </html>Código JS (é realmente apenas uma linha)
ContratCreatEController.JS
var ftitappmodule = angular.module ('ftitapp', []);Isso é bom. Alguns pontos -chave a serem explicados:
NG-Class: esta tag é usada para controlar o valor da classe. Por exemplo, ng-class = "{'has-sucess' :! createContactForm.content. $ Primitivo} significa que, se o valor de! CreateContactForm.content.
NG-SHOW: controla se o controle é exibido.
CreateContActFform. $ Válido: Depois que toda a verificação é passada, o valor é verdadeiro, caso contrário, é falso
CreateContactForm.Content. $ Válido: identifica se o controle de conteúdo passa a verificação, passa verdadeira, caso contrário, é falso
CreateContactForm.Content. $ PRISTINO: Identifica se o controle de conteúdo nunca foi inserido. Nunca é inserido como verdadeiro, caso contrário, é falso
Para problemas técnicos mais detalhados, consulte a documentação técnica do AngularJS.