AngularJS 인증폼 기능 구현에 대한 코드 분석

이 글에서는 주로 AngularJS 폼 유효성 검사 기능을 소개하고, 구체적인 예시를 바탕으로 AngularJS 폼 유효성 검사의 동작 단계, 구현 기술 및 관련 주의 사항을 분석합니다 , 도움이 필요한 친구는

을 참조하세요. 이 글은 AngularJS 양식 확인 기능을 예시로 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

AngularJS의 관할 하에 각 양식은 ngFormController의 인스턴스를 생성합니다. 양식의 각 입력은 이 인스턴스 아래에 ngModelController 인스턴스를 생성하여 각 입력의 동작을 제어합니다.

먼저 간단한 인증부터 시작해보세요.

AngularJs의 ngModelController는 다음과 같은 여러 속성을 제공합니다. $pristine;$dirty;$valid;$invalid;$error

pristine: 양식이 변경되지 않았습니다.
dirty: 형식이 변경되었습니다.
valid: 모든 컨트롤은 유효성 검사 규칙을 준수합니다.
invalid: 하나 이상의 컨트롤이 유효성 검사 규칙을 준수하지 않습니다.
error: 오타가 있는데 무슨 오류인지 모르겠습니다.

다음과 같이 양식을 만듭니다.

<form name="userForm" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span ng-show="userForm.name.$error.pattern">用户名必须XXXX</span>
</form>

먼저 각 양식에는 고유한 이름이 있어야 합니다. 이 이름을 사용하여 아래 입력을 제어하세요. 그런 다음 각 입력 태그에는 고유한 이름이 있어야 합니다. 이름은 중요한 단계이며 각각의 서로 다른 입력을 식별하고 이를 통해 서로 다른 ngModelController를 식별하는 데 사용됩니다. 패턴을 사용하여 자신만의 정규 표현식 규칙을 설정하세요. $error를 사용하여 정규식이 올바른지 확인하세요. 그리고 이를 ng-show 지시문에 할당합니다. 오류가 있으면 $error 전체가 true를 반환하고 정규식이 통과할 때까지 설정된 프롬프트 정보가 표시되며, $error는 false를 반환하고 ng-show는 이를 숨깁니다.

위의 간단한 예에서는 컨트롤러의 동작을 직접 재설정할 필요가 없으며 모든 것이 AngularJ의 기본값입니다. ng-show의 판단 코드는 나중에 JS에서 실제로 완성될 수 있어 ngModelController의 구체적인 프로세스를 볼 수 있음을 알 수 있습니다.

<!--html-->
<form name="userForm" ng-controller="main" method="#" action="#">
  <label for="name">用户名1</label>
  <input id="name" name="name" type="text" ng-model="users.name" pattern="^\w{6,18}$" required>
  <span style="color:red" ng-show="showError(userForm.name,&#39;pattern&#39;)">用户名必须XX</span>
  <span style="color:green" ng-show="showSuccess(userForm.name)">成功！</span>
  <!--对按钮进行动态锁定-->
  <button class="btn btn-primary btn-lg" ng-disabled="submit(userForm)">SAVE</button>
</form>

판단은 컨트롤러의 ngModelController에서 직접 이루어집니다. 여기에는 $valid와 같은 속성을 판단하는 매개변수가 없다는 함정이 있습니다. $error를 판단하려면 "무엇을 판단할지"를 지정해야 합니다. 나는 그에게 정규식을 전달했습니다.

AngularJ는 양식의 제출 버튼을 "잠글" 수도 있습니다. 하지만 이때 BUTTON에 해당하는 Controller는 더 이상 특정 입력에 대한 ngModelController가 아니라 전체 폼에 대한 ngFormController이므로 내부의 $invalid는 모든 항목에 문제가 있는지 확인하는 것입니다. 입력하면 모든 것이 정상적으로 잠금 해제됩니다.

생각: JS 파일에는 정규 표현식이나 최소 길이와 같은 제한 사항을 작성할 수 있습니다.

위 내용은 AngularJS 인증폼 기능 구현에 대한 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!