angular表单验证案例记录

常用的表单验证指令:

1.必填的表单验证指令:

某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可:

<input type="text" required />

 最小长度:

验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}":

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

最大长度:

<input type="text" ng-maxlength="20"/>

模式匹配

使用ng-pattern="/PATTERN/"来确保输入能够匹配指定的正则表达式:

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

电子邮件:

验证输入内容是否是电子邮件,只要像下面这样将input的类型设置为email即可:

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

数字:

验证输入内容是否是数字,将input的类型设置为number:

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

URL

验证输入内容是否是URL,将input的类型设置为 url:

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




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,084评论 19 139
  • 过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时也提供了方便的途径可以自己创建...
    oWSQo阅读 4,824评论 0 5
  • 在input元素上使用的所有验证选项 1.必填项 验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标...
    楚王爷家的小哪吒阅读 4,206评论 0 1
  • AngularJSAngularJS 是一个 MV* 框架, 最适于开发客户端的单页面应用。它不是个功能库,...
    一直以来都很好阅读 4,398评论 0 0
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 5,577评论 0 3

友情链接更多精彩内容