1.AngularJS可以验证表单和控件可以验证输入的数据；

2.输入验证：客户端不能确保用户输入数据的安全，所以服务器端的数据验证也是必须的；

3.应用实例：

<! DOCTYPE html>

<html>

<script src=http://apps.bding.com/libs/angular.js/1.4.6/angular.min.js></script>

<body>

<h2>Validation Example</h2>

<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>

<p>用户名：<br>

　　<input type="text" name="user" ng-model="user" required>          //ng-model指令用于绑定输入元素到模型中

　　<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

　　<span ng-show="myForm.user.$error.required">用户名是必须的</span></span>

</p>

<p>邮箱：<br>

　　<input type="email" name="email" ng-model="email" required>           //模型有两个属性：user和email

　　<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">

　　<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>

　　<span ng-show="myForm.email.$error.email">非法的邮箱</span>

　　</span>

</p>

<p>

　　<input type="submit"

　　 ng-disabled="myForm.user.$dirty && myForm.uer.$invalid || myForm.email.$dirty && myForm.email.$invalid">

</p>

</form>

<script>

var app=angular.module('myApp',[]);

app.controller('validateCtrl',function($scope){

　　$scope.user='John Doe';

　　$scope.email='john.doe@gmail.com';

});

</script>

</body>

</html>

4.验证属性：

**$dirty:表单有填写记录；

**$valid:字段内容合法的；

**$invalid：字段内容是非法的；

**$pristine:表单没有填写记录；

AngularJS学习之输入验证的更多相关文章

  1. AngularJS（五）：表单及输入验证

    本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...

  2. [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  3. AngularJS：输入验证

    ylbtech-AngularJS:输入验证 1.返回顶部 1. AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 Ang ...

  4. 【15】AngularJS 输入验证

    AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告.   客户端的验证不能确保用 ...

  5. 2017.9.23 HTML学习总结----JavaScript实现输入验证

    定义:对于一个HTML页面中的表单,可以获取其中的各项表单域信息, 利用这些信息,可以判定个表单域所提供的输入值是否合法,是否 符合所要求的格式,这就是表单的输入验证. (1)需要验证的表单输入域的要 ...

  6. angularjs学习总结 详细教程（转载）

    1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...

  7. AngularJs学习总结－了解基本特性（－）

    现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...

  8. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

  9. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

随机推荐

  1. NHibernate实战详解（一）领域模型设计

    关于NHibernate的资料本身就不多,中文的就更少了,好在有一些翻译文章含金量很高,另外NHibernate与Hibernate的使用方式可谓神似,所以也有不少经验可以去参考Hibernate. ...

  2. 关于内核调试（Windbg）的虚拟机配置问题

    注:本文配置 环境为VMware® Workstation11.1.2 build-2780323+Windows xp SP2+Windbg 6.12.0002.63 x86 *在win7以后的操作 ...

  3. ssm控制输出sql（二）

    望时高科联通log4j # DEBUG,INFO,WARN,ERROR,FATAL LOG_LEVEL=DEBUG ---------这里对应sql的级别 log4j.rootLogger=${LOG ...

  4. 【C语言】指针

    错误一: 一种错误的写法: * sizeof(int)); * sizeof(int)); y = x; 没有必要为y开辟内存,因为y在开辟内存时 y内存储的地址时开辟的内存的位置, 但是后面又把x的 ...

  5. php数据访问（查询）

    查询:常用关键字查询 和 准确查询 单条件查询 创建添加查询元素 <br /> <form action="main.php" method="post ...

  6. PHP安全编程：不要让不相关的人看到报错信息

    没有不会犯错的开发者,PHP的错误报告功 能可以协助你确认和定位这些错误,可以提供的这些错误的详细描述,但如果被恶意攻击者看到,这就不妙了.不能让大众看到报错信息,这一点很重要.做到这一 点很容易,只 ...

  7. 解决Eclipse里Maven工程报 An error occurred while filtering resources错误

    这几天被maven的单元测试折腾死了,以为是自己的eclipse有问题呢,今天早上来了又发现eclipse报了一个很奇怪的错误:An error occurred while filtering re ...

  8. 关于Cookie和Session的优缺点

    关于Cookie和Session的优缺点 具体来说cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. Cookie的优缺点:优点:极高的扩展性和可用 ...

  9. Mybatis 学习笔记1

    ---恢复内容开始--- 什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获 ...

  10. merge

    当两个DataFrame相加的时候,如果,其中一个不全则会相加产生NA,所以必须一次性将数据的索引索引确定下来,然后对所有数据重建索引然后,填充0,再相加.否则有数据的和没数据的相加结果都变为了NA, ...