建议添加 novalidate属性(可无值)到form标签上,这样可以保证在表单不合法的情况下阻止浏览器继续提交数据。

可以给表单元素 input 添加 required 属性(可无值),让该表单成为必填项,如:

  1. <form action="" name="formName" novalidate ng-controller="test">
  2. <input type="text" name="name" ng-model="use.name" required>
  3. </form>

Angularjs中表单最常用的就是用 ng-model 属性进行双向绑定了。用 ng-model 绑定数据后,可以时时的和数据进行交互。

使用 ng-model 属性进行绑定的表单,会自动的添加一些 class 样式,如:

非必填表单

初始化时会添加 .ng-pristine 和 .ng-valid 两个class样式。当表单为非空时 class 样式会变成 .ng-valid 和 .ng-dirty 。其中将 .ng-pristine 变成了 .ng-dirty 。

必填表单

初始化时会添加 .ng-pristine 、.ng-invalid 和 .ng-invalid-required 三个class样式。当表单为非空时 class 样式会变成 .ng-dirty 、.ng-valid 和 .ng-valid-required 。

以上 class 样式还只是针对默认的input(即type=text的input),像那些特殊意义的 input ,如:type=email、type=number等。其 class 样式的种类会更多。

Angular input最小长度

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

Angular input最大长度

  1. <input type="text" ng-maxlength="5" />

Angular表单匹配正则表达式

  1. <input type="text" ng-pattern="/a-zA-z" />

AngularJS通过DOM元素上设置一个表单,从而使我们可以很容易的获取到当前 $scope 对象的属性。

判断表单未修改

  1. <form action="" name="formName" novalidate ng-controller="test">
  2. <input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn(formName.name.$pristine);">
  3. </form>
  4. <script>
  5. function test($scope){
  6. $scope.fn = function(o){
  7. alert(o);
  8. }
  9. }
  10. </script>

运行以上代码,formName.name.$pristine 会返回一个布尔值。

因为 formName 是当前域(test)中 $scope 对象的属性,所以我们也可以用如下方法来获取 $pristine 值,以查看值是否有改变。如:

  1. <form action="" name="formName" novalidate ng-controller="test">
  2. <input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn();">
  3. </form>
  4. <script>
  5. function test($scope){
  6. $scope.fn = function(){
  7. alert($scope.formName.name.$pristine);
  8. }
  9. }
  10. </script>

如下一些属性与 $pristine 属性类似,如 $dirty、$valid等。

判断表单修改过 $dirty 属性。

判断表单合法 $valid 属性。

判断表单非法 $invalid 属性。

判断表单错误 $error 属性。如果某个验证失败,则这个属性返回true,相反如果这个属性为false,则代表验证通过。

$error 属性是一个非常有用的属性,如:

  1. <form action="" name="testemail" novalidate ng-controller="testemail">
  2. <input type="email" name="email" ng-model="us.email" required> <input type="button" value="打印" ng-click="printemail()">
  3. </form>
  4. <script>
  5. function testemail($scope){
  6. $scope.printemail = function(){
  7. alert($scope.testemail.email.$error);
  8. }
  9. }
  10. </script>

如果 $error 是获取 type=email 的属性,则会返回这样一个对象:Object {required: true, email: false} ,其中返回的对象包含一个 required 和 email 属性。如果是获取 type=number 的属性则对象包含的属性则是 required 和 number 。

Angularjs中input的指令和属性的更多相关文章

  1. angular5中的自定义指令(属性指令)

    属性型指令用于改变一个 DOM 元素的外观或行为. 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 ...

  2. HTML中,input元素的 Disabled属性 所产生的后端无法接收数据的问题

    背景 今天从前端提交 form表单 数据时,发现 设置 Disabled 的 input 元素的字段数据在后端无法接收到 原因 查阅资料(来自W3school): disabled 属性规定应该禁用 ...

  3. angularJS中的ng-repeat指令!

    ng-repeat 指令: ng-repeat 指令用来遍历一个数组重复创建当前元素: <ul ng-app="myApp" ng-controller="myAp ...

  4. html中input标签的tabindex属性

    当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能.但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面 ...

  5. HTML中input标签的alt属性和title属性的比较

    经常用到这两个属性,但是一直没有总结他们的区别.现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容. 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性 ...

  6. iphone中input按钮设置disabled属性出现灰色背景没有显示问题

    在项目中发现发送验证码的按钮,在点击后添加disabled属性后,iphone手机中出现disabled属性的默认背景颜色没有显示,反而直接显示它下面的父级元素的白色 点击前 点击后 倒计时的按钮消失 ...

  7. AngularJS 中{{}}与ng-bind指令

    面试中,有被问题关于{{}}与ng-bind指令的问题,在此,分享下自己的知识点. 在脚本没有加载完成时,用户会看到{{}},界面比较丑陋.     一般的解决方法: 在index.html里面使用n ...

  8. angularjs中directive指令与component组件有什么区别?

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  9. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

随机推荐

  1. jQuery ui 中文日历

    jQuery ui 中文日历 <link href="css/jquery-ui-1.10.4.custom.min.css" rel="stylesheet&qu ...

  2. Spark Streaming揭秘 Day13 数据安全容错(Driver篇)

    Spark Streaming揭秘 Day13 数据安全容错(Driver篇) 书接上回,首先我们要考虑的是在Driver层面,有哪些东西需要维持状态,只有在需要维持状态的情况下才需要容错,总的来说, ...

  3. 字符设备驱动中cdev与inode、file_operations的关系

    一.cdev与inode 二.cdev与file_operations

  4. html lang

    目前,语言的标签表示法的国际标准是RFC 4646,名称是<Tags for Identifying Languages>.简单说,这个文件规定,一种语言的标签应该按照如下方式排列: la ...

  5. Fedora 17安装NFS

    1.NFS概述 NFS(Network File System)是一种分布式文件系统,允许网络中的安装不同操作系统的计算机间共享文件和外设,所以它的通讯协定设计与主机及作业系统无关. 它是由SUN公司 ...

  6. ofbiz进阶之实体引擎配置文件

    The Open For Business Project: Entity Engine Configuration Guide 原文链接:http://ofbiz.apache.org/docs/e ...

  7. IOS播放音频 AVAudioPlayer(实例)

    1. AVFoundation Build Phases => Link Binary With Libraies => + => AVFoundation.framework =& ...

  8. vs中的主题配置

    比较讨厌vs的默认字体颜色及背景,代码看久了就受不了.不过自己手动配置的话还是比较麻烦的,这里有一个网站(http://studiostyl.es/)提供了很多主题,一般都是背景比较深色的,对眼睛比较 ...

  9. 第一个js库文件

    <!DOCTYPE html> <html xmlns=;         ;                     }                 };     })(); ...

  10. java后台SSH框架之Hibernate心得一

    双向关联和单向关联 双向关联:这两个表无论哪一个更新另外一个表都更新 单向关联:就是只有一个主表更新从表才更新 从表更新主表不管 双向关联配置 表1配置 <set name="对象名称 ...