위 그림과 같이 다음 검증 기능을 구현해야합니다.
컨트롤은 필수 컨트롤입니다
모두 최대 길이를 제어해야합니다
페이지가 처음 열리면 컨트롤을 오류 상태로 표시 할 수 없습니다.
입력 컨텐츠가 지워지면 필요한 입력 제어를 오류 상태로 표시해야합니다.
게시 버튼은 모든 입력이 유효 한 후에 만 사용할 수 있습니다.
AngularJS를 사용하면 이러한 요구 사항을 쉽게 구현할 수 있습니다. 1 행의 JS 코드 만 필요합니다. UI 스타일은 여기에 부트 스트랩을 사용합니다. 샘플 코드부터 시작하겠습니다.
HTML.
<! doctype html> <html lang = "Zh-Cn"ng-app = "ftitapp"> <head> <meta charset = "utf-8"/> <title> demo </title> <link href = "/content/bootsprap.cs"rel = "styleshet"/> src = "/scripts/angular.js"> </script> </head> <body> <div> <!-메인 내용 영역-> <div> <div> <!-연락처 양식 영역-> <form action = "/contact/create"method = "post"role = "createcontactform"ng-controller = "<! ng-class = "{ 'has-success':! createcontactform.username. $ ristine && createcontactform.username. $ valid, 'has-error':! createcontactform.username. $ recristine && createContactform.username. $ invalid}"> 라벨 "> 당신의 이름*<input =" " ng-model = "username"name = "username"autofocus = ""필수 ng-maxlength = 30> <div ng-show = "! createcontactform.username. $ ristine && createcontactform.username. $ valid"> <span> </span> </div> <div ng-show = "! createcontactorm.username. CreateContactform.username. $ invalid "> <span> </span> </div> <!-usermail 이메일 주소-> <div ng-class ="{ 'has-success':! createcontactform.usermail. $ createcontactform.usermail. $ valid, 'has-Error', '$ promail. CreateContactform.usermail. $ invalid} "> <label for ="usermail "> 이메일 주소*</label> <입력 유형 ="email "ng-model ="usermail "name ="usermail "필요한 ng-maxlength = 30> <div ng-maxlength = 30> </div> <div ng-show = "! createcontactform.usermail. $ ristine && createcontactform.usermail. $ invalid"> <span> </span> </div> </div> <!-주제-> <div ng class = "{ 'has-success':! createcontactform.subject. 'has-error':! createcontactform.subject. $ ristine && createcontactform.subject. $ invalid} "> <라벨에 대한 ="subject "> subject*</label> <input type ="text "ng-model ="subject "name"rudecontactform. CreateContactform.subject. $ valid "> <span> </span> </div> <div ng-show ="! createcontactform.subject. $ ristine && createcontactform.subject. $ invalid "> </span> </div> </div> <!-content-> div ng-class ="em has-success ': succcess': CreateContactform.content. $ ristine && createcontactform.content. $ valid, 'has-error':! createcontactform.content. $ ristine && createcontactform.content. $ invalid} "> <label for ="content "> content*</label> <textArea cols ="4 "rows ="5 "rows ="rows = "5"rows = "4"rows = " ng-maxlength = 1000> </textarea> <div ng-show = "! createcontactform.content. $ ristine && createcontactform.content. $ valid"> <span> </div> <div ng-show = "! createcontactform.content. $ pristine && createcontactform.content. <!-제출 버튼-> <div> <div ng-show = "CreateContactForm. $ valid"> <input type = "image"src = "/intod/indime/comment_publish_button.png"onsubmit = "downsubmit ();"; value = "value ="ng-disabled = '! createcontactform. $ valid'/> </div> <div ng-show = "! createcontactform. $ valid"> <img src = "/incents/images/invalid_publish_button.png"/> </div> </form> </div> </div> </div> </div> < src = "/scripts/ftit/contactcreatecontroller.js"> </script> </body> </html>JS 코드 (실제로 한 줄만)
ContractCreateController.js
var ftitappModule = Angular.Module ( 'ftitapp', []);
괜찮아요. 설명해야 할 몇 가지 핵심 사항 :
NG 클래스 :이 태그는 클래스 값을 제어하는 데 사용됩니다. 예를 들어, ng-class = "{ 'has-success':! createcontactform.content. $ fristine}은 reatecontactform.content의 값이 사실이라면 클래스의 값이 has-success라는 것을 의미합니다.
NG-SHOW : 컨트롤이 표시되는지 제어합니다.
CreateContActForm. $ 유효 : 모든 검증이 전달 된 후에는 값이 참입니다. 그렇지 않으면 False입니다.
CreateContActForm.Content. $ Valid : 컨텐츠 컨트롤이 확인을 통과하는지 여부를 식별합니다. 그렇지 않으면 False입니다.
CreateContactform.Content. $ Cristine : 컨텐츠 제어가 입력되지 않았는지 확인합니다. 그것은 결코 참으로 입력되지 않습니다. 그렇지 않으면 거짓입니다.
보다 자세한 기술 문제는 AngularJS 기술 문서를 확인하십시오.