几点注意:使用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自带的表单验证的更多相关文章

  1. 一款基于jQuery的带Tooltip表单验证的注册表单

    今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...

  2. vue element-ui 通过v-for渲染的el-form-item组件,使用自带的表单验证

    HTML: <el-form ref="newTermDetail" :model="newTermDetail" class="auto_fo ...

  3. H5自带表单验证

    HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...

  4. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  5. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  6. angularjs学习第四天笔记(第一篇:简单的表单验证)

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  7. AngularJS 表单验证小结

    注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type=& ...

  8. laravel5表单验证

    学习laravel框架有一段时间了,觉得它自带的表单验证特别好用,和大家分享分享 对于一些验证规则手册上都有,相信大家看了就会,我简单的说下怎么使用自定义正则验证: 验证手机号:'tel' => ...

  9. Django之表单验证

    对于前端的表单进行验证的方法,从最简单的js到基于XML传输的Ajax,再到cookie的免认证,现在Django为我们提供了自带的表单验证方法. views.py: from django impo ...

随机推荐

  1. MyBatis 源码分析——生成Statement接口实例

    JDBC的知识对于JAVA开发人员来讲在简单不过的知识了.PreparedStatement的作用更是胸有成竹.我们最常见用到有俩个方法:executeQuery方法和executeUpdate方法. ...

  2. android学习4——View的长宽问题

    画形状的时间经常会用到点的坐标,这时原点O的位置就非常重要.在像素为1280*720的设备上画一条直线.代码如下所示: import android.app.Activity; import andr ...

  3. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  4. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  5. 智能打印SDK-源码剖析

    开源地址:http://www.dnnode.com/ 软件下载地址:http://www.dnnode.com/在线展示:http://www.dnnode.com/help.html 前面的文章, ...

  6. Java 内部类详解

    什么 定义在一个类内部的类,称为内部类(累不累),如下: public class A { private int c = 1; public class C { public void test() ...

  7. hibernate系列笔记(3)---持久化对象

    持久化对象 再讲持久化对象之前,我们先来理解有关session中get方法与 load方法区别: 简单总结: (1)如果你使用load方法,hibernate认为该id对应的对象(数据库记录)在数据库 ...

  8. Token在android中的使用

    首先Token是一个怎么样的东西,Token存在的意义又在哪里?学过php或是其他web开发的人都知道一个东西叫session和cookie,这些东西可以在服务器或是本地保存一些东西,比如说登录状态, ...

  9. 免费企业ERP系统OA+ERP

    AIO5基于B/S架构而研发,集成了OA(办公自动化).SCM(供应链管理).FM(财务管理)三大主力单元.支持手机APP. 协助中小型企业全面管理采购.销售业务, 规范仓库进出,处理与合作伙伴的往来 ...

  10. [vijosP1303]导弹拦截(最长上升子序列转LCS)

    描述 某国为了防御敌国的导弹袭击,研发出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹来袭 ...