AngularJs实现ng1.3+表单验证

这篇文章主要介绍了AngularJs实现ng1.3+表单验证,感兴趣的小伙伴们可以参考一下

前一篇文章详解AngularJS实现表单验证说过,ng1.3+以后对于表单验证有了优化,它不再需要一个详细的表达式状态创建元素显示或隐藏。

例如:我们在ng1.3之前的版本都需要如下写法:

复制代码 代码如下:

ng1.3之后新增了一个ngMessages指令,他被打包成一个模块发布,因此我们使用的时候只需要将这个依赖模块引入即可

复制代码 代码如下:
angular.module('myApp', ['ngMessages']);

怎么用?

现在我们学习一下,它的用法,Code如下:

   Index 
用户名

$error:{{myForm.name.$error}}
必填项
字符太短小于3
字符太长大于20

效果如下:

可以看出,其实ng是通过$error来监视模型的变化,因为$error中包含了错误的详细信息,同时,如果我们的应用场景中如果同时,有好几处错误,那么,上面代码按照ng-message的顺序只会显示一条错误信息,如果我们需要全部显示出来只需要添加 ng-messages-multiple

 
必填项
邮件格式不对
字符太短小于3
字符太长大于20

效果如下:

怎么复用?

我们的验证信息在一个项目中大多是通用性很高的(对于样式,描述等都有高度的统一性),因此我们这里也会考虑到复用,ng中同样提供了解决方案

就是将其作为模板,指定请求路径由ng自动添加。这里再介绍一个指令 ng-messages-include

我们将上面的验证信息保存到一个独立的html静态页面中,然后使用ng-messages-include指定请求路径即可。

Code:

 

error.html

 
必填项
邮件格式不对
字符太短小于3
字符太长大于20

效果如下:

当然,模板可能在特殊的时期某些字段错误提示不能满足你的要求,你可以添加自定义的提示如下:

 

自定义验证(指令)涉及到的细节知识点很多,如果简单地为了用而用,可能写得出功能,但是代码丑陋,太菜了,还需要花个把月方能弄懂点皮毛,这部分暂告一段落,等彻底明白了,在大家分享,大家亦可以结合《理解AngularJs指令》进行学习。

以上就是AngularJs实现ng1.3+表单验证的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读