AngularJS表单验证(上) 2014.6.18

构建一个ng表单

1.确保form上标签有一个name属性,像下面的例子一样。最好再加一个novalidate=”novalidate”

2.form中不能有action属性。提交交由ng-submit处理

3.每个input一定要有ng-model,最好有一个name方便引用。然后用require或者ng-minlength之类才起作用

ng默认提供了验证

验证是否已输入文字,只需在标签上加上required

验证至少输入{number}个字符,使用指令ng-minlength=“{number}”

验证至多输入{number}个字符,使用指令ng-maxlength=“{number}”

确保输入匹配一个正则表达式,使用指令ng-pattern="/PATTERN/":

验证输入是一个Email,设置inputtype属性为email

验证输入是一个数字,设置inputtype属性为number

验证输入是一个URL,设置inputtype属性为url

实战一个例子(需要验证一个email为发须并且最小为10,最长为20,并且并须要含有m字符。没有实际意义,只是演示例子)

运行这个例子先啥都不做,查看元素

 

注意看这些标出来的东西有点意思。然后输入字符就能看到他们的进行变化。然后我来解释一下这些东西。(可以看到一开始required就为ng-invalid-required。但其他的都为valid)

验证的时候感觉好像出现一个bug.具体如下:(如有知道的请帮助一下解释一下这个问题)

第一个例子的email居然ng-valid-email。感觉有点问题。难道是用了type=”email”之类就不能用ng-minlength ng-pattern之类了吗?觉得可能是ng版本问题,但换了低版本之后发现同样有问题。希望有人能解释一下这个问题。github有这个问题 https://github.com/angular/angular.js/issues/7849 而且email验证的时候github上有人提出了其他问题,https://github.com/angular/angular.js/issues/5899,看来对于type=”email”和 url之类要使用的时候多注意,我的建议是尽量不用。如果需要请写自定义验证。下面我会介绍,确实是有够蛋疼之处。由于这种问题,所以我写的表单不会出现type=”email” type=”url” type=”number”之类,如果ng解决了这个问题。我再进行更新。

表单的状态

我们把焦点只聚积到表单(class有如下属性ng-pristine ng-invalid ng-invalid-required),如果变动在第一个输入框中输入s,现在class就变了ng-invalid ng-invalid-required ng-dirty ng-invalid-minlength

 

现在需要解释一些东西了

AngularJS将DOM验证的结果保存在$scope对象中。这使我们能够实时做出一些处理。提供给我们的属性有:

$pristine表示用户是否修改了表单。如果为ture,表示没有修改过:

$dirty当且用户是否已经修改过表单:

我们来直观的看下

 

如果表单进行变动的时候,可以看到表单的一些属性进行了实时的变化。观察上面四个,你不难发现。$dirty和$valid是相反的,一个true,一个false或者一个false一个true,同样$valid,是得到现在是否通过验证的和$invalid也是相反的。

表单的部分说的差不多了,然后说表单中的每项的东西

 

可以看到每个表单项也有跟表单有些共同的属性,注意一下$error对象,记录了是哪个出现错误正确的。

实战简单实例

显示效果如图,当然有人有疑问了,比如第一个表单项,我不想提示填写不正确这么模糊的说法,而是告诉他是不是因为他没有填写,或者是因为他字符不够,或者是因为你超过了最大字符。这也非常好办,还记的$error吗?可以通过form.name.$error.minlength之类的得到啊。明白了不。还是不明白,好吧,再给逗逼做个代码实例

也许你稍为有些思路了。但还是很多时候力不从心,比如哥想自定义验证或者通过后台验证unique呢?再比如他这个一边输入一边就提示效果太他妈差了。我想在提交时提示或者我想在鼠标不在这个焦点的时候再提示。OK,也许你还有很多想法,但上篇已经结束了,容我整理思路,带来表单验证中篇。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值