AngularJs implements ng1.3+ form validation_AngularJS-JS Tutorial-php.cn

AngularJs implements ng1.3+ form validation_AngularJS

WBOY

Release： 2016-05-16 15:26:28

Original

1351 people have browsed it

Detailed explanation of the previous articleAngularJS implementation of form validationIt has been said that form validation has been optimized after ng1.3+. It no longer requires a detailed expression state to create an element to display or hide.

For example: Our versions before ng1.3 need to be written as follows:

Copy code The code is as follows:

A new ngMessages directive was added after ng1.3. It is packaged into a module and released, so when we use it, we only need to introduce this dependent module

Copy code The code is as follows:

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

How to use?

Now let’s learn how to use it. The code is as follows:

<!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>

Copy after login

The effect is as follows:

It can be seen that ng actually monitors model changes through $error, because $error contains detailed information about the error. At the same time, if there are several errors at the same time in our application scenario, then the above code Only one error message will be displayed in the order of ng-message. If we need to display them all, we only need to add 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>

Copy after login

The effect is as follows:

How to reuse?

Most of our verification information is highly versatile in a project (highly consistent in styles, descriptions, etc.), so we will also consider reuse here, and ng also provides a solution

Just use it as a template, and the specified request path will be automatically added by ng. Here is another directive ng-messages-include

We save the above verification information to a separate html static page, and then use ng-messages-include to specify the request path.

Code:

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

Copy after login

error.html

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

Copy after login

The effect is as follows:

Of course, the template may not meet your requirements for certain field error prompts in special periods. You can add custom prompts as follows:

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

Copy after login

Custom verification (instructions) involves a lot of details and knowledge. If you use it simply for the sake of use, you may be able to write the function, but the code is ugly and too clumsy. It will take you a few months to understand it. The superficial part is over for now. Once you fully understand it, I will share it with you. You can also study it in combination with "Understanding AngularJs Commands" .