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的具体实现我们后面文章再谈。回到这种验证的优势,除了数据双向绑定给我们带来的优势,我们使用指令还可以进行一些更加个性化的验证。

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

原文地址:https://www.cnblogs.com/barryli/p/3289270.html