ngMessages를 사용한 AngularJS 양식 유효성 검사

거의 모든 웹사이트는 양식을 사용하여 사용자 등록이나 연락처 정보 가져오기 등 다양한 작업을 수행합니다. 양식을 작성하는 사용자가 최소한 입력 필드에 유효한 정보를 입력했는지 확인하는 것이 중요합니다.

사용자가 양식을 올바르게 작성할 수 있도록 자세한 오류 메시지도 표시되어야 합니다. 이 프로세스는 각각 고유한 사용자 정의 오류 메시지가 필요한 많은 수의 양식 요소를 처리해야 할 때 매우 복잡해질 수 있습니다. 이러한 문제를 완화하기 위해 Angular 1.3에는 개발자가 양식을 쉽게 확인할 수 있도록 ngMessages라는 새로운 모듈이 추가되었습니다.

ngMessages 모듈을 사용하면 중복 코드를 작성하지 않고도 사용자에게 사용자 정의 오류 메시지를 표시할 수 있습니다. 이 튜토리얼에서는 이 모듈을 사용하여 양식의 유효성을 검사하는 방법을 배웁니다. 또한 외부에서 오류 메시지를 로드하고 실제로 필요할 때만 메시지를 표시하는 방법도 알아봅니다.

기본 예

이 모듈의 유용성을 이해하기 위해 먼저 ngMessages의 도움을 받거나 사용하지 않고 단일 입력 필드의 유효성을 검사해 보겠습니다. ngMessages를 사용하지 않으면 입력 요소의 마크업은 다음 코드와 같습니다.

으아아아

다음 JavaScript 코드도 필요합니다:

으아아아

다른 모든 양식 요소에도 유사한 유효성 검사가 필요합니다. 이렇게 하면 마크업이 매우 반복적으로 만들어져 오류 가능성이 높아집니다. 동일한 양식 입력의 유효성을 검사하기 위해 ngMessages를 사용하기로 결정한 경우 마크업은 다음 코드와 같습니다.

으아아아

JavaScript 코드는 이제 다음과 같습니다.

으아아아

여기에서는 ng-messages 指令将错误消息分组在一起。传递给 ng-messages 指令的值遵循以下模式 formName.inputName.$error。在我们的例子中，其计算结果为 formValidation.username.$error를 사용합니다.

마찬가지로 다른 모든 필드의 ng-messages 指令的值。 ngMessages 依赖 ngModel 指令公开的 $error 对象来确定是否应在网页上显示或隐藏错误消息。它循环遍历 $error 对象，查找与任何 ng-message 지시어와 값이 일치하는 키를 가져올 수도 있습니다.

다음은 위의 유효성 검사 코드가 실제로 작동하는 것을 보여주는 작업 예입니다.

확인 양식

이 섹션에서는 사용자 이름, 비밀번호 및 이메일 필드가 포함된 양식의 유효성을 검사합니다. 양식의 마크업은 다음 코드와 같습니다.

으아아아

보시다시피 다양한 양식 요소의 유효성을 검사하는 데 필요한 마크업은 매우 유사합니다. 이 예에서 중요한 변경 사항은 A-Z, a-z, 0-9 및 _와 같은 단어 문자를 나타내기 위해 ng-pattern 指令。我们在这里使用的模式确保输入的用户名仅包含字母数字字符和下划线。 w 位于 /^w+$/를 추가한 것입니다.

사용자 이름 필드에 다른 사용자 이름을 입력해 보세요. 잠시 후 처음 6자 앞이나 처음 12자 뒤에 문자를 입력하면 해당 문자가 영숫자가 아니라고 양식에서 불평하지 않는다는 것을 알게 될 것입니다. 이 동작은 사용자 친화적이지 않습니다.

예를 들어 일부 사용자의 사용자 이름이 느낌표로 시작한다고 가정해 보겠습니다. 영숫자만 사용한다는 오류가 발생하려면 6자를 더 입력할 때까지 기다려야 합니다. 사용자 이름을 처음부터 다시 입력하기 시작하면 매우 실망스러울 것입니다.

기본적으로 ngMessages는 한 번에 하나의 오류만 사용자에게 표시합니다. 이것이 사용자가 6자 이상을 입력할 때까지 잘못된 문자에 대한 메시지가 표시될 수 없는 이유입니다. 또한 ngMessages는 오류 메시지를 입력하는 순서를 힌트로 사용하여 우선순위를 정합니다.

영숫자 오류가 발생하기 전에 최소 문자 메시지를 제공하면 ngMessages는 영숫자 오류를 표시하기 전에 최소 문자 오류가 해결될 때까지 기다립니다.

같은 형식이지만 오류 메시지가 다른 순서로 표시됩니다.

또한 ng-messages-multiple를 사용하여 해당하는 모든 오류 메시지를 사용자에게 한 번에 표시할 수도 있습니다. 그러나 사용자가 입력 필드에 입력을 시작하면 여러 오류 메시지가 표시되어 부담스러울 수 있습니다.

重用错误消息

我们的标记中仍然有很多重复。如果您想为不同的输入字段显示相同的错误消息，则为每个输入字段重复它是没有意义的。 ngMessages 模块可以帮助您仅编写一次通用错误消息，并在需要时将它们包含在您的表单中。以下是创建向用户显示通用错误消息的表单的标记。

<script type="text/ng-template" id="generic-messages">
    <p ng-message="required">This field is required.</p>
    <p ng-message="minlength">This field is too short.</p>
    <p ng-message="maxlength">This field is too long.</p>
</script>

<form name="formValidation">

    <label>Username</label>
    <input type="text" name="username" ng-model="inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error">
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
      <p ng-message="maxlength">Username cannot be longer than 12 characters.</p>
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Password</label>
    <input type="text" name="userPassword" ng-model="inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error">
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Email</label>
    <input type="email" name="userEmail" ng-model="inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error">
      <p ng-message="required">This field is required.</p>
      <p ng-message="email">Please enter a valid email address.</p>
    </div>
</form>

就像前面的情况一样，消息的优先级由其在模板中的位置决定。您还可以通过在各个字段中包含自定义错误消息来覆盖模板中提供的通用消息。还可以使用以下代码从单独的文件加载错误消息：

<div ng-messages="formValidation.userPassword.$error">
    <div ng-messages-include="path/to/generic-messages.html"></div>
</div>

仅在需要时显示错误

您可以通过仅在用户在填写表单时实际出错时显示错误消息，使表单更加用户友好。例如，您可以选择仅在用户实际跳过输入元素时显示必填字段错误。

这可以通过使用 ng-show 或 ng-if 指令以及 $touched 和 $dirty。对于 $touched，一旦输入失去焦点，就会显示错误消息。对于 $dirty，一旦输入无效就会显示错误消息。

<div ng-messages="form.username.$error" ng-if="form.username.$touched">

<div ng-messages="form.username.$error" ng-if="form.username.$dirty">

<div ng-messages="form.username.$error" ng-show="form.username.$touched">

<div ng-messages="form.username.$error" ng-show="form.username.$dirty">

这是显示 $touched 和 $dirty 之间区别的演示。

结论

在本教程中，您了解了使用 ngMessages 验证不同类型表单元素的输入是多么容易。您还学习了如何多次重复使用相同的错误消息以避免重复，以及如何确定不同错误消息的优先级。

您还可以同时使用 ngMessages 和 ngAnimate 来使用自定义动画来显示或隐藏错误消息。有关使用 ngAnimate 模块的教程也将很快在 Envato Tuts+ 上发布。

如果您想与其他读者分享任何提示，或者有任何问题想问，请在评论中告诉我。

위 내용은 ngMessages를 사용한 AngularJS 양식 유효성 검사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!