Page 55 - AngularJS权威教程

7.2 表单验证 35

将整个过程分开来看，我们只是像以前一样在表单发生改变，且输入内容不合法时才展示错 1
误内容。现在，我们会在特定的属性未通过验证时只展示对应的特定DOM元素。
接下来看下一组验证，电子邮箱的验证： 2

<div class="row">
<div class="large-12 columns">
<label>Your email</label> 3
<input type="email"
placeholder="Email"
name="email" 4
ng-model="signup.email"
ng-minlength="3" ng-maxlength="20" required />
<div class="error" 5
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required. 6
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength"> 7
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email"> 8
That is not a valid email. Please input a valid email.
</small>
<small class="error" 9
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div> 10
</div>
</div>
11
现在整个表单都被包含进来了，我们来看一下电子邮件的输入字段。注意，我们将输入字段
的type属性设置为email，并且在$error.email上添加了验证错误的信息。这个验证同时基于
AngularJS和HTML5属性实现。 12

最后，看一下用户名的输入字段：
13
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired username" 14
name="username"
ng-model="signup.username"
ng-minlength="3" 15
ng-maxlength="20"
ensure-unique="username" required />
<div class="error" 16
ng-show="signup_form.username.$dirty &&
signup_form.username.$invalid">
<small class="error"
ng-show="signup_form.username.$error.required"> 17
Please input a username
</small>
<small class="error" 18
ng-show="signup_form.username.$error.minlength">