JS 코드 한 줄로 제어 검증 효과를 얻기 위해 AngularJS 프레임워크를 사용하는 방법을 가르칩니다.

JS 코드 한 줄로 제어 검증 효과를 얻기 위해 AngularJS 프레임워크를 사용하는 방법을 가르칩니다._AngularJS

WBOY

풀어 주다： 2016-05-16 16:43:37

원래의

1389명이 탐색했습니다.

위 그림과 같이 다음과 같은 검증 기능을 구현해야 합니다.

컨트롤은 모두 잃어야 하는 컨트롤입니다
둘 다 최대 길이를 조절해야 합니다
페이지를 처음 열 때 오류 상태로 컨트롤을 표시할 수 없습니다
입력 내용이 삭제된 후 필요한 입력 컨트롤이 오류 상태로 표시되어야 합니다
모든 입력이 합법적인 경우에만 게시 버튼을 사용할 수 있습니다
AngularJS를 통해 우리는 단 한 줄의 JS 코드로 이러한 요구 사항을 쉽게 구현할 수 있습니다. 여기서 사용된 UI 스타일은 Bootstrap입니다. 샘플 코드부터 시작해 보겠습니다.

HTML.

<!DOCTYPE html>
<html lang="zh-cn" ng-app="ftitApp">
<head>
 <meta charset="utf-8" />
 <title>Demo</title>
 <link href="/Content/bootstrap.css" rel="stylesheet"/>
 <script src="/Scripts/angular.js"></script>
</head>
<body>
 <div class="container body-content">
  <!-- 主要内容区域 -->
  <div class="row main-content">
   <div class="col-md-9">

    <!-- 联系我们表单区域 -->
    <form action="/Contact/Create" method="post" role="form" name="createContactForm" ng-controller="ContactCreateController">
     <!-- UserName 您的称呼 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.UserName.$pristine && createContactForm.UserName.$valid, 'has-error' : !createContactForm.UserName.$pristine && createContactForm.UserName.$invalid }">
      <label for="UserName">您的称呼*</label>
      <input type="text" class="form-control" ng-model="userName" name="UserName" autofocus="" required ng-maxlength=30>
      <div ng-show="!createContactForm.UserName.$pristine && createContactForm.UserName.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.UserName.$pristine && createContactForm.UserName.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- UserMail 邮箱地址 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid, 'has-error' : !createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid }">
      <label for="UserMail">邮箱地址*</label>
      <input type="email" class="form-control" ng-model="userMail" name="UserMail" required ng-maxlength=30>
      <div ng-show="!createContactForm.UserMail.$pristine && createContactForm.UserMail.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.UserMail.$pristine && createContactForm.UserMail.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- Subject 主题 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.Subject.$pristine && createContactForm.Subject.$valid, 'has-error' : !createContactForm.Subject.$pristine && createContactForm.Subject.$invalid }">
      <label for="Subject">主题*</label>
      <input type="text" class="form-control" ng-model="subject" name="Subject" required ng-maxlength=100>
      <div ng-show="!createContactForm.Subject.$pristine && createContactForm.Subject.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.Subject.$pristine && createContactForm.Subject.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- Content 内容 -->
     <div class="form-group has-feedback" ng-class="{'has-success' : !createContactForm.Content.$pristine && createContactForm.Content.$valid, 'has-error' : !createContactForm.Content.$pristine && createContactForm.Content.$invalid }">
      <label for="Content">内容*</label>
      <textarea cols="4" rows="5" class="form-control" ng-model="content" name="Content" required ng-maxlength=1000></textarea>
      <div ng-show="!createContactForm.Content.$pristine && createContactForm.Content.$valid">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
      </div>
      <div ng-show="!createContactForm.Content.$pristine && createContactForm.Content.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
     </div>
     <!-- 提交按钮 -->
     <div class="form-group">
      <div ng-show="createContactForm.$valid">
       <input type="image" src="/Content/images/comment_publish_button.png" onsubmit="submit();" value="发布" ng-disabled='!createContactForm.$valid' />
      </div>
      <div ng-show="!createContactForm.$valid">
       <img src="/Content/images/invalid_publish_button.png" />
      </div>
     </div>
    </form>
   </div>
  </div>
 </div>
 
 <script 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.$pristine의 값이 true인 경우 클래스의 값이 has-success임을 의미합니다.
ng-show: 컨트롤 표시 여부를 제어합니다.
createContactForm.$valid: 모든 확인이 통과되면 값은 true이고, 그렇지 않으면 false입니다
createContactForm.Content.$valid: 콘텐츠 컨트롤이 확인을 통과했는지 여부를 식별합니다. 통과하면 true이고, 그렇지 않으면 false입니다.
createContactForm.Content.$pristine: 콘텐츠 컨트롤이 입력된 적이 없는지 여부를 식별합니다. 입력한 적이 없으면 참, 그렇지 않으면 거짓
보다 자세한 기술적인 문제는 AngularJS 기술 문서를 확인하세요.