AngularJS学习篇（十七）
AngularJS 输入验证
<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.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>
<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>
<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.user.$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>
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
| 属性 | 描述 |
|---|---|
| $dirty | 表单有填写记录 |
| $valid | 字段内容合法的 |
| $invalid | 字段内容是非法的 |
| $pristine | 表单没有填写记录 |
AngularJS学习篇（十七）的更多相关文章
- AngularJS学习篇（二十四）
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇（二十三）
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇（二十二）
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇（二十一）
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctyp ...
- AngularJS学习篇（二十）
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇（十六）
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
- AngularJS学习篇（十五）
AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...
随机推荐
- apollo实现c#与android消息推送(一)
之前做了c#推送消息到手机端,限于网络要求,不能使用百度等现成的推送,查了许多资料,七拼八凑终于凑齐,记录下来,即是复习也是希望对来者有所帮助. 我开发的环境是windows,使用java开发的Apa ...
- http://codeforces.com/problemset/problem/847/E
E. Packmen time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- Ansible(三) - playbook简介
Ⅰ. Playbook介绍 Playbook其实就是ansible的一个任务列表,各任务按次序逐个在hosts中指定的所有主机上执行,即在所有主机上完成第一个任务后再开始第二个.在顺序运行某playb ...
- HAProxy安装文档
HAProxy安装文档 [toc][TOC] 一.环境说明 系统环境:CentOS Linux release 7.2.1511 (Core) 系统内核:3.10.0-327.el7.x86_64 软 ...
- webpack——devtool里的7种SourceMap模式
我们先来看看文档对这 7 种模式的解释: 模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL. source-map 生成一个S ...
- 移动端效果之CellSwiper
写在前面 接着之前的移动端效果讲解,刚好项目中需要使用到这一效果,去饿了么的组件库看了一下效果,发现效果和微信端的cellSwiper还是有点差别的,由于项目中又是使用的React,之前使用的Reac ...
- Python内置类型(2)——布尔运算
python中bool运算符按优先级顺序分别有or.and.not, 其中or.and为短路运算符 not先对表达式进行真值测试后再取反 not运算符值只有1个表达式,not先对表达式进行真值测试后再 ...
- Java面向对象 GUI 补录
Java面向对象 GUI 补录 知识概要:(1)GUI和CLI (2)AWT和SWING (3)AWT继承关系图 ...
- django集成celery之callback方式link_error和on_failure
在使用django集成celery进行了异步调度任务之后,如果想对失败的任务进行跟踪或者告警,怎么做? 这里提供一个亲测的方法. 1.任务callback 假如你想在任务执行失败的时候,打印错误信息并 ...
- SSM框架整合项目 ：投票系统
框架: Spring SpringMVC MyBatis 题目: 投票系统 导包: 1, spring 2, MyBatis 3, mybatis-spring 4, fastjson 5, aspe ...