AngularJS 验证
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
| 属性 | 描述 |
|---|---|
| $dirty | 表单有填写记录 |
| $valid | 字段内容合法的 |
| $invalid | 字段内容是非法的 |
| $pristine | 表单没有填写记录 |
例子如下：
<!DOCTYPE html>
<html>
<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/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 验证的更多相关文章
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 前端MVC学习总结（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习笔记（二）——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 1、AngularJS 验证
1.formName.inputFieldName.property($pristine(未修改).$dirty(修改过的).$valid(合法).$invalid(非法).$error(当前表单所有 ...
- 在AngularJS中实现自定义表单验证
除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...
- AngularJS 五 过滤器及验证
AngularJS过滤: AngularJS过滤器允许我们格式化数据以在UI上显示而不改变原始格式. 格式: 一些比较重要的过滤器: Number Filter ...
- AngularJS（五）：表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
- angularjs ng-repeat下验证问题
angularjs验证要求name唯一,repeat情况,name 等通过${index}等绑定,也无法获取值 通过ng-from的方法,这样验证name重复也可以了. <ng-form nam ...
- AngularJS 参考手册
AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ...
随机推荐
- 转载jQuery图片放大插件[twiPicZoom]
转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能说明: 双击查看大图,鼠标滚动放大缩小,能够切换到 ...
- java 500/404错误总结
404是路径错误,简单的说就是你的页面找不到后台执行它的代码(未找到服务端代码)500最常见的就是你的编程语言语法错误导致的(服务端代码报错)
- October 5th 2016 Week 41st Wednesday
Don't follow the crowd, let the crowd follow you. 不要随波逐流,要引领潮流. But to be a good follower is already ...
- 假期（codevs 3622）
题目描述 Description 经过几个月辛勤的工作,FJ决定让奶牛放假.假期可以在1-N天内任意选择一段(需要连续),每一天都有一个享受指数W.但是奶牛的要求非常苛刻,假期不能短于P天,否则奶牛不 ...
- 添加本地jar到Maven库
转自:http://dk05408.iteye.com/blog/2170986 上传: mvn install:install-file -Dfile=D:/workspace/p2p_server ...
- Linuxc：创建与监控多个子进程
#include <unistd.h> #include <sys/types.h> #include <stdlib.h> #include <signal ...
- 自己动手编译hadoop-2.5.2源码
搭建环境:Centos x 6.5 64bit (后来:我才知道原来官网上发布的就是64位的,不过这个对我来说是个学习过程,对以后进行其他平台编译的时候有帮助!) 1.安装JDK 我这里用的是64位 ...
- php 复习
<?php 一.php基础语法1.输出语句:echo print print_r var_dump() 2.php是弱类型语言强制转换类型: (类型)变量 settype(变量,类型) 3.变量 ...
- 验证码的种类与实现 C#封装类 - .NET MVC WEBFORM
验证码方式 1.随机字母或者数字,纯文本验证码 这种非常容易破解 ,市场上有大量的现成接口或者工具,背景越复杂难度越高. 2.题库验证码 要破解这种验证码,需要人工收集题库才可以破解,可以免疫不是专门 ...
- MVC – 7.Razor 语法
7.1 Razor视图引擎语法 Razor通过理解标记的结构来实现代码和标记之间的顺畅切换. @核心转换字符,用来 标记-代码 的转换字符串. 语境A: @{ string rootName=&quo ...