ng自带的表单验证
几点注意:使用ng的表单验证,需要给form,input,textarea一个name
要求:验证输入框的内容(长度,正则,必填,),当验证不通过的时候,就禁用提交按钮
使用的验证:ng-maxlength
,ng-minlength ,ng-pattern ,required ,ng-disabled
input的type=“url,email,number,
html:
<form name="idea_info" novalidate>
<!---novalidate阻止浏览器的默认验证--->
<input type="text" name="idea_title" autocomplete="off" required
ng-minlength="5" ng-maxlength="20" class="form-control
my-panel-title" placeholder="创意标题" ng-model="ideas.name"/>
<div>
<p class="my-help-block"
ng-show="idea_info.idea_title.$error.minlength ||
idea_info.idea_title.$error.maxlength || idea_info.idea_title.$dirty&&idea_info.idea_title.$invalid">标题名5-20个字符</p>
<p
class="my-help-block" ng-show="idea_info.idea_title.$error.required || idea_info.idea_title.$dirty&&idea_info.idea_title.$invalid">标题名必填</p>
</div>
<input name=”use_phoner” ng-pattern=”/^1[3,4,5,8,9]\d{9}&/”/>
<!---ng-pattern="/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i"-->
<div>
<p class="my-help-block" ng-show="idea_info.use_phoner.$error.pattern>请输入合法的手机号码格式</p>
</div>
<!--按钮的禁用--->
<p
class="bottom-btn
text-right">
<button type="submit"
class=" my-btn-lg "
ng-click="addIdeas()" ng-class="{'active':!idea_info.$invalid}" ng-disabled="idea_info.$invalid" >保存</button>
<button class=" my-btn-lg
btn-outline-green"
ng-click="cancel_save()">取消</button>
</p>
</form>
ng自带的表单验证的更多相关文章
- 一款基于jQuery的带Tooltip表单验证的注册表单
今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...
- vue element-ui 通过v-for渲染的el-form-item组件,使用自带的表单验证
HTML: <el-form ref="newTermDetail" :model="newTermDetail" class="auto_fo ...
- H5自带表单验证
HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...
- 从浅入深剖析angular表单验证
最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...
- iview表单验证下拉框不通过问题
iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...
- angularjs学习第四天笔记(第一篇:简单的表单验证)
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
- AngularJS 表单验证小结
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...
- laravel5表单验证
学习laravel框架有一段时间了,觉得它自带的表单验证特别好用,和大家分享分享 对于一些验证规则手册上都有,相信大家看了就会,我简单的说下怎么使用自定义正则验证: 验证手机号:'tel' => ...
- Django之表单验证
对于前端的表单进行验证的方法,从最简单的js到基于XML传输的Ajax,再到cookie的免认证,现在Django为我们提供了自带的表单验证方法. views.py: from django impo ...
随机推荐
- 操作符、语句、函数——Javascript高级程序设计
1.操作符 一元操作符:++.--放在变量前后的区别,+.—表示正负 位操作符:64位存储.32位计算,对NOT.AND.OR.XOR.<<.>>.>>>的掌 ...
- 每天一个linux命令(27)--tar命令
通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候 tar 命令就是必不可少的一个功能强大的工具.Linux 中最流行的 tar 是麻雀虽小,五脏俱全. tar 命令可以为Linux ...
- 9 个用于移动APP开发的顶级 JavaScript 框架
顶级 Java 框架 对于Web开发而言,Java是一个有前途的编程语言,并且在不久的将来它将依然在这个领域大放光彩.Java在移动app开发上也有同样的影响吗?让我们一起来看看ValueCoders ...
- Javaweb之Servlet入门
1. 什么是Servlet? Java Servlet 是运行在 Web 服务器或应用服务器上的程序:他是浏览器(HTTP客户端)请求和HTTP服务器上资源(访问数据库)之间的中间层. 2. 什么是S ...
- HTML5之通信和多线程
HTML通信 跨文档消息传输 HTML5提供了在网页文档之间相互接收和发送信息的功能,使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口)的网页可以相互通信,甚至可以实现跨域通信.涉及 ...
- webpack-react之webpack篇(http://www.jianshu.com/p/794d573d2c53)
构建一个小项目——FlyBird,学习webpack和react.(本文成文于2017/2/25) 从webpack开始本篇从零开始,详细记录webpack的各个方面.文章中将会放入很多链接以便扩展, ...
- <c>----<choose><when><otherwise>
<c:choose> <c:when test="${username== '1' && password== '2'}"> <jsp ...
- (七)javascript中的数组
一. 一维数组 1.1 声明数组 var 数组名=new Array(数组大小); 1.2 添加元素 <script> var a=new Array(3); a[0]="张三 ...
- OpenStack/devstack with Neutron on Ubuntu 14 (2)
在前面的文章中,已经完成了devstack的安装.下面,我会介绍如何使用neutron 首先创建两个neutron net, vmnet1 和vmnet2 stack@ubuntu:~/devstac ...
- ubuntu桌面不显示菜单
为什么?我也不知道,只记得之前在搜狐看了行尸走肉,然后第二次开机就看不到菜单了. 参照百度结果然后去尝试了一下,记过ok了,我的ubuntu是13.10. 图说: 看到这里就应该大概怎么做了. 1 ...