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

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

<form action="" name="formName" novalidate ng-controller="test">
<input type="text" name="name" ng-model="use.name" required>
</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最小长度

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

Angular input最大长度

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

Angular表单匹配正则表达式

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

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

判断表单未修改

<form action="" name="formName" novalidate ng-controller="test">
<input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn(formName.name.$pristine);">
</form>
<script>
function test($scope){
$scope.fn = function(o){
alert(o);
}
}
</script>

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

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

<form action="" name="formName" novalidate ng-controller="test">
<input type="text" name="name" ng-model="use.name" required> <input type="button" value="查看" ng-click="fn();">
</form>
<script>
function test($scope){
$scope.fn = function(){
alert($scope.formName.name.$pristine);
}
}
</script>

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

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

判断表单合法 $valid 属性。

判断表单非法 $invalid 属性。

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

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

<form action="" name="testemail" novalidate ng-controller="testemail">
<input type="email" name="email" ng-model="us.email" required> <input type="button" value="打印" ng-click="printemail()">
</form>
<script>
function testemail($scope){
$scope.printemail = function(){
alert($scope.testemail.email.$error);
}
}
</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. try catch finally 关闭流标准的写法

    平常开发中,都知道要在finlly里关闭流,但是有时finlly里代码不当,会引起另外的异常. 以下是看struts2源代码看到的,随手记录下. 有两点注意: (1)判断流是否为空. (2)filly ...

  2. php substr,iconv_substr,mb_substr

    php进行中文字符串的截取时,会经常用到二个函数iconv_substr和mb_substr,对这二个函数应该如何选择呢?参考下本文介绍的例子就明白了. 示例代码,用到了函数substr与iconv_ ...

  3. (转)《深入理解java虚拟机》学习笔记1——Java内存结构

    java虚拟机规范规定的java虚拟机内存其实就是java虚拟机运行时数据区,其架构如下: 其中方法区和堆是由所有线程共享的数据区. Java虚拟机栈,本地方法栈和程序计数器是线程隔离的数据区. (1 ...

  4. php源代码安装常见错误与解决办法分享

    错误:configure: error: libevent >= 1.4.11 could not be found 解决:yum -y install libevent libevent-de ...

  5. java se doc

    J2SE 5.0 Performance White Paper http://www.oracle.com/technetwork/java/5-136747.html Java Tuning Wh ...

  6. SSL与TLS的区别以及介绍

    转载 :http://kb.cnblogs.com/page/197396/ SSL:(Secure Socket Layer,安全套接字层),位于可靠的面向连接的网络层协议和应用层协议之间的一种协议 ...

  7. ./configure详解

    'configure'脚本有大量的命令行选项.对不同的软件包来说,这些选项可能会有变化,但是许多基本的选项是不会改变的.带上'--help'选项执行'configure'脚本可以看到可用的所有选项.尽 ...

  8. [转载]深入理解ASP.NET MVC之ActionResult

    Action全局观 在上一篇最后,我们进行到了Action调用的“门口”: 1 if (!ActionInvoker.InvokeAction(ControllerContext, actionNam ...

  9. [转载]jquery tmpl使用方法

    动态请求数据来更新页面是现在非常常用的方法,比如博客评论的分页动态加载,微博的滚动加载和定时请求加载等. 这些情况下,动态请求返回的数据一般不是已拼好的 HTML 就是 JSON 或 XML,总之不在 ...

  10. 在smarty模板中嵌入php代码

    我个人并不太喜欢smarty的语法,写起来比较啰嗦易出现匹配出错,但是旧项目中有许多工程都是采用它作模板.最近需要在此上稍微加一些PHP的内容,但我不想在模板控制层去一个一个assign,而想在模板文 ...