Angularjs系列之表单验证

  最近开始学习Angularjs , 查看官网上的文档看的我很无语，许多方面都只是大致讲了一下，后来翻看源代码的时候发现，里面注释写的倒反而比文档清晰了。。。   之所以第一篇就写表单验证，一是表单验证是一个比较实用的功能，而且涉及了数据双向绑定，指令等知识点。我一般比较喜欢熟悉了操作后再进一步理解原理，这样我觉得比较有层次。。   我们知道在html5中已经支持了简单的表单验证指令，同样在angularjs中也提供了类似的指令，下面是一些常用的验证选项。

• Required

 <input type="text" required />

• Minimum length

<input type="text" ng-minlength=5 />

• Maximum length

<input type="text" ng-minlength=5 />

• Mathces a pattern

<input type="text" ng-pattern="/a-zA-Z/" />

• Email

<input type="email" name="email" ng-model="user.email" />

• Number

<input type="number" name="email" ng-model="user.age" />

• Url

<input type="url" name="homepage" ng-model="user.facebook_url" />

上面列举的都是html5中都已经支持，因此为了屏蔽点html5中默认的验证效果，我们可以在form上引用novalidate属性。

那么使用这种验证方式有什么好处呢，为什么不选择默认的效果呢。我们看上面的例子可以发现，input标签内有一个默认的属性ng-model,这个是做什么的呢？ng-model主要用于进行数据双向绑定，所有实现ngmodel指令的元素都会绑定ngmodelcontroller用于进行数据双向绑定，关于ngmodel的具体实现我们后面文章再谈。回到这种验证的优势，除了数据双向绑定给我们带来的优势，我们使用指令还可以进行一些更加个性化的验证。

先更新到这儿。。有点事。。