AngularJS学习之输入验证
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学习之输入验证的更多相关文章
- AngularJS（五）：表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
- [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- AngularJS：输入验证
ylbtech-AngularJS:输入验证 1.返回顶部 1. AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 Ang ...
- 【15】AngularJS 输入验证
AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 客户端的验证不能确保用 ...
- 2017.9.23 HTML学习总结----JavaScript实现输入验证
定义:对于一个HTML页面中的表单,可以获取其中的各项表单域信息, 利用这些信息,可以判定个表单域所提供的输入值是否合法,是否 符合所要求的格式,这就是表单的输入验证. (1)需要验证的表单输入域的要 ...
- angularjs学习总结 详细教程（转载）
1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢. AngularJS是google在维护,其在国外已经十分火热,可是国内的 ...
- AngularJs学习总结－了解基本特性（－）
现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+ ...
- [转载]angularjs学习总结 详细教程
http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...
- AngularJs学习笔记--Forms
原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...
随机推荐
- 两种js数组去重的方法
方法一: 新建一个数组,遍历原数组,在新数组内用IndexOf查找原数组内的每一项,如果没有找到,则添加到其中 代码如下: function arrayNew(arrs ){ var newArray ...
- JAVA中的Calendar得到当前时间的年份、月份、日期
import java.util.Calendar; public class CalendarTest { public static void main(String[] args) ...
- 【leetcode】 Palindrome Partitioniong (middle) (*^__^*)
Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...
- 【linux】find删除指定时间之前的文件
今天磁盘满了,想删掉一些老的日志文件.开始想写个python脚本,转念一想,可能shell脚本好点.结果发现,根本不用写脚本,一个find指令就可以解决问题了. 先上指令 -exec rm {} \; ...
- 【python】多进程学习
来源:廖雪峰 讲解看来源吧 把例子记一下 1.用fork创建进程 import os print "Process (%s) start..." % os.getpid() pid ...
- 【XLL API 函数】xlSet
快速的将常数值放入到单元格区域中. 原型 Excel12(xlSet, LPXLOPER12 pxRes, 2, LPXLOPER12 pxReference,LPXLOPER pxValue); 参 ...
- IOS - UIViewController的生命周期
1)Load周期 2)Unload周期 在UIViewController中,view(黑体的view指的是controller的view属性)有两个循环:加载和卸载循环.当程序的一部分向contro ...
- java ---线程wait/notify/sleep/yield/join
一.线程的状态 Java中线程中状态可分为五种:New(新建状态),Runnable(就绪状态),Running(运行状态),Blocked(阻塞状态),Dead(死亡状态). New:新建状态,当线 ...
- 1.1 STL 概述
综述 STL = Standard Template Library,标准模板库,惠普实验室开发的一系列软件的统称.它是由Alexander Stepanov.Meng Lee和David R M ...
- C/C++学习笔记---高地址、低地址、大段字节序、小段字节序
字节顺序是指占内存多于一个字节类型的数据在内存中的存放顺序,通常有小端.大端两种字节顺序. 小端字节序指低字节数据存放在内存低地址处,高字节数据存放在内存高地址处: 大端字节序是高字节数据存放在低地址 ...