AngularJS入门之数据验证-白红宇

AngularJS入门之数据验证

阅读量：5169 次

发布时间：2019-06-13

本文共 3715 字，大约阅读时间需要 12 分钟。

AngularJS自带了对表单或控件的输入数据进行验证的功能，对于Html5的基础控件均有内建的验证器，以下列举了所有支持的验证类型：

maxlength

minlength

number

pattern

required

date

datetimelocal

time

week

month

AngularJS会在元素上自动添加如下样式：

ng-valid: 验证通过

ng-invalid: 验证失败

ng-valid-[key]: 由$setValidity添加的所有验证通过的值

ng-invalid-[key]: 由$setValidity添加的所有验证失败的值

ng-pristine: 控件为初始状态

ng-dirty: 控件输入值已变更

ng-touched: 控件已失去焦点

ng-untouched: 控件未失去焦点

ng-pending: 任何为满足$asyncValidators的情况

示例1：

1  3  4     17 18     19     33 34 35     
     
      36         Name:37         
      38         
      Name is required.39         
      
40         Age:41         
      42         
      Age is required and should between 1-200.43         
      
44         Sex:45         
      49         
      Sex is required.50         
      
51         Email:52         
      53         
      Email is not correct.54         
      
55         Blog:56         
      57         
      Blog is not correct.58         
      
59         Birthday:60         
      61         
      Birthday is not correct.62 63         
      
       myForm.$valid is {
   {myForm.$valid}}
      
64         
      
       myForm.$invalid is {
   {myForm.$invalid}}
      
65         
      
       myForm.$pristine is {
   {myForm.$pristine}}
      
66         
      
       myForm.$dirty is {
   {myForm.$dirty}}
      
67         
      
       myForm.$submitted is {
   {myForm.$submitted}}
      
68 69         
      
       myForm.age.$error is {
   {myForm.age.$error}}
      
70 71         
      72     
     
73     
     
74     
     
      75         
      Name:{
   { stu.name }}76         
      Age:{
   { stu.age }}77         
      Sex:{
   { stu.sex == 0 ? "Male" : "Female" }}78         
      Email:{
   { stu.email }}79         
      Blog:{
   { stu.blog }}80         
      Birthday:{
   { stu.birthday }}81         
      
82     
     
83 84

示例1中，首先对form添加novalidate属性来禁用form的浏览器默认验证行为：

对必填的控件添加required属性：

本例有2种验证结果展示方式：

1. 控件边框颜色变化：

本文开头已说过，AngularJS会在验证控件后自动添加内建的样式名称，因此，我们只需对这些预定义的样式名称添加实际的样式代码即可：

1 .ng-invalid.ng-dirty { 2     border-color: #FA787E; 3 } 4  5 .ng-valid.ng-dirty { 6     border-color: #78FA89; 7 } 8  9 .ng-pristine.ng-pristine {10     border-color: #ffd800;11 }

2. 文字显示验证失败原因（以name控件为例）：

Name is required.

ng-hide：当name为初始化状态或者通过验证的状态，无需显示错误信息提示；

ng-show：当name控件验证失败时，展示错误提示信息。

AngularJS还提供了一些内建的状态值，方便我们直接使用：

$dirty：内容已变更

$pristine：初始化状态

$valid：验证通过

$invalid：验证失败

$submitted：已提交

$error：所有验证失败的hash对象

$$success：所有验证通过的hash对象

$pending：所有pending（异步验证）的hash对象

form中添加ng-submit属性，并且当myForm.$valid（即myForm中包含的所有验证均通过时，该值才为true）提交表单并调用addStudent方法：

这样，当在页面上填写完有效的信息后，我们就可以将学生对象添加到Controller的students中，并由于双向绑定的特性，最终将提交的信息同步展示到页面上。

自定义验证器

你可能也猜到了，AngularJS也为我们准备好了自定义验证的方式。AngularJS实际上是通过自定义Directive，并在link中将验证方法添加到指定控件的$validators中，在$validators中定义的对象必须有modelValue和viewValue两个参数，AngluarJS会在底层调用$setValidity来验证它。

我们看一个简单的例子，自定义验证Directive：myInteger（my-integer），输入值必须是以“1”开头，并为3位数字。

示例2：

1  3  4      5     31 32 33     
     
      34         My integer:
      35         
      My integer is required and should be the value 1xx.36     
     
37 38

修改AngularJS的内建验证器方法

当然如果你需要重写AngularJS内建的验证也是可以的。

示例3（官方Demo）：

1  3  4      5     28 29 30     
     
      31         
      
       32             Overwritten Email:33             
       34             
       This email format is invalid!
       
35             Model: {
    {myEmail}}36         
      
37     
     
38 39