AngularJs는 ng1.3 형식 검증을 구현합니다.-JS 튜토리얼-php.cn

AngularJs는 ng1.3 형식 검증을 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:26:28

원래의

1321명이 탐색했습니다.

이전 기사에 대한 자세한 설명AngularJS 양식 유효성 검사 구현말씀드린 것처럼 양식 유효성 검사는 ng1.3 이후에 최적화될 예정입니다. 표시하거나 숨길 요소를 생성하기 위해 더 이상 자세한 표현식 상태가 필요하지 않습니다. .

예: ng1.3 이전 버전은 다음과 같이 작성해야 합니다.

코드 복사 코드는 다음과 같습니다.

ng1.3 이후에 새로운 ngMessages 지시어가 추가되었습니다. 모듈로 패키징되어 출시되었으므로 사용할 때는 이 종속 모듈만 도입하면 됩니다

코드 복사 코드는 다음과 같습니다.

angular.module('myApp', ['ngMessages' ]);

사용방법은?

이제 사용 방법을 알아보겠습니다.

<!DOCTYPE html>
<html ng-app="myTest">
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Javascript/angular.js"></script>
    <script src="~/Javascript/angular-messages.js"></script>

    <style type="text/css">
      body {
        padding-top: 30px;
      }
    </style>
  </head>
  <body>
    <div class="col-md-6">
      <form role="form" name="myForm" class="form-horizontal" novalidate>
        <div class="form-group">
          <div class="col-md-2">
            用户名
          </div>
          <div class="col-md-10">
            <input type="text" placeholder="ng-Messages测试" name="name" ng-model="username.name"
                ng-minlength=3 ng-maxlength=20 required />
            <hr/>
            $error：{{myForm.name.$error}}
            <hr/>
            <div ng-messages="myForm.name.$error">
              <div ng-message="required">必填项</div>
              <div ng-message="minlength">字符太短小于3</div>
              <div ng-message="maxlength">字符太长大于20</div>
            </div> 
          </div>
        </div>
      </form>
    </div>
  </body>
</html>
<script type="text/javascript">
   angular.module("myTest", ['ngMessages']);
</script>

로그인 후 복사

효과는 다음과 같습니다.

$error에는 오류에 대한 자세한 정보가 포함되어 있으므로 ng가 실제로 $error를 통해 모델 변경 사항을 모니터링하는 것을 볼 수 있습니다. 동시에 응용 프로그램 시나리오에서 여러 오류가 동시에 발생하면 위의 코드는 다음과 같습니다. ng-message 순서대로 하나의 오류 메시지만 표시됩니다. 모두 표시하려면 ng-messages-multiple만 추가하면 됩니다

<input type="text" placeholder="测试" name="name" ng-model="username.name" ng-minlength=3 ng-maxlength=20 required />
<div ng-messages="myForm.name.$error" ng-messages-multiple>
<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>  
<div ng-message="maxlength">字符太长大于20</div>
</div>

로그인 후 복사

효과는 다음과 같습니다.

재사용 방법은?

대부분의 검증 정보는 프로젝트에서 매우 다양하므로(스타일, 설명 등의 일관성이 높음) 여기에서도 재사용을 고려할 것이며 ng도 솔루션을 제공합니다

그냥 템플릿으로 사용하면 지정된 요청 경로가 ng에 의해 자동으로 추가됩니다. 여기에 또 다른 지시어 ng-messages-include가 있습니다

위 확인 정보를 별도의 html 정적 페이지에 저장한 후 ng-messages-include를 사용하여 요청 경로를 지정합니다.

코드:

 <div ng-messages="myForm.name.$error" ng-messages-multiple
    ng-messages-include ="@Url.Content("~/Content/template/error.html")">
  </div>

로그인 후 복사

error.html

<div ng-message="required">必填项</div>
<div ng-message="email">邮件格式不对</div>
<div ng-message="minlength">字符太短小于3</div>
<div ng-message="maxlength">字符太长大于20</div>

로그인 후 복사

효과는 다음과 같습니다.

물론 특수 기간에는 템플릿이 특정 필드 오류 프롬프트에 대한 요구 사항을 충족하지 못할 수도 있습니다. 다음과 같이 사용자 정의 프롬프트를 추가할 수 있습니다.

<div class="error" ng-messages="signup_form.name.$error" 
ng-messages-include="templates/errors.html"> 
<!-- 
  按ng-message的顺序依次覆盖
--> 
</div>

로그인 후 복사

사용자 정의 검증(지침)에는 많은 세부 사항과 지식이 필요합니다. 단순히 사용 목적으로 사용하면 함수를 작성할 수는 있지만 코드가 보기 흉하고 너무 엉성합니다. 이제 피상적인 부분은 끝났습니다. 완전히 이해하고 나면 "AngularJ 명령 이해하기" 와 함께 공부할 수도 있습니다.