angularJs 表单验证

之前没事学习了一下angularjs的表单验证，在这里记录一下。

使用angularJs表单控件属性进行验证

在angularjs中表单被封装了，在给表单起名字之后就能看到表单的许多属性.

这些属性时用来方便给我们验证的,可以通过这些属性来显示我们的错误信息。

添加一个表单的控件，为它绑定上ng-model 和添加名字后，就可以看到它的属性:

$dirty表示用户是否修改过控件的值，$touched表示用户是否触碰过控件,valid代表控件是否通过了验证,$error代表验证的错误.
首先添加一个angularjs内置的验证required,他表示该字段必须填写，否则就会出错:

添加了这个验证后，明显的发现了$error对象增加了一个属性required,这是因为我们加入了必填的验证，但是data.name的值却没有，所以就有了required的错误,并且字段的验证是不通过的,$valid 属性为false

当输入一个2时，$error的属性消失了，由于通过了验证，所以$valid属性也变成了true,同时$dirty变成了true,$touched在这里也变成了true,但他们是不一样的(后边会说明).

由此我们可以通过验证来显示我们的错误信息，当$error.required为true时，就代表这个字段的值是空的,此时我们显示错误的信息，提示用户填写字段,用ng-show来实现.

问题是用户还没有输入我们就显示了错误的信息，这样是不对的,这时候就可以用$dirty和$touched来帮助验证了，只有在用户与控件交互过，并且验证还不通过的时候，我们才显示我们的错误信息.这两个不同之处在于:

当我们输入一个1,$dirty立即就为true了，但$touched此时还是false,他是在你把鼠标点击别处的时候他才会变成true,就是说你的控件值一改变,$dirty立即为true,当你第一次转移这个控件的焦点时，$touched才变成true.根据个人的需要使用这两个属性.

未输入:

输入1：

删掉1:

当控件通过验证时,他的$valid才为true,因此我们可以通过这个显示通过验证的信息:

使用自定义的验证

有时候angularjs内置的验证不够用的时候，就得我们自己自定义验证了，自定义的验证分为同步验证和异步的验证.

同步验证

在绑定了ng-model指令后，就可以使用ng-model的api来增加我们自定义的验证.

这里增加require属性绑定ng-model后，在link里就可以用第四个参数,就是ng-model指令的控制器,可以使用angularjs ng-model指令暴露的方法来给ng-model的值增加验证器,当ng-mdel视图的值改变时，他会调用验证器，此时就会调用我们的验证.
同步验证的添加方法:

在c.$validators对象上添加方法,这个方法就是我们要验证的方法,他能接受两个参数,一个是模型的值,一个是视图的值,每当视图的值改变时,他都会调用$validators上所有的方法,也会调用我们定义的验证方法,在判断中,如果return true就代表通过验证,return false 代表失败验证,失败时$error就会出现方法名称的错误(这里是xxx : true).