设为首页 加入收藏

TOP

AngularJS中的表单验证
2016-12-06 20:36:30 】 浏览:122
Tags:AngularJS 表单 验证

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证


正则式验证
只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成


数字
设置input的type=number即可


邮箱


URL


效果
效果是实时的,很带感


相对于上面的每个验证都要自己写代码判断,ngMessages提供了一种更为简洁的方式
https://docs.angularjs.org/api/ngMessages/directive/ngMessages


简直是第二次解放啊。。。
form-touched


如果你有一部分form的内容是动态生成的,数量和名字都不确定的时候,该如何验证这些生成的元素呢?其实维护一个动态的form本来就是个问题。但是在angular中,只需要记住一点:准备好你的数据,其他的交给angular。像下面这个例子,你只需要维护好一个数组,然后利用ng-repeat就可以快速的呈现到页面上。
dynamic-form2
dynamic-form1


其实动态的form和一般的form验证都是一致的,只是动态的form需要使用myForm[inout_name].$error的形式访问


有些表单我们不希望粗暴的在下面添加文字信息提示验证,而是希望更简洁的方式,如:加亮边框,突出显示
warn-validate
需要做的只是在required验证没通过的时候添加class,改变元素的样式即可


一些AngularJS相关文章链接


希望你喜欢,并分享我的工作~带你走近AngularJS系列


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Spring之AntPathMatcher 下一篇如何把IP转换成经纬度(Java版)

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容:

最新文章

热门文章

C 语言

C++基础

windows编程基础

linux编程基础

C/C++面试题目