AngularJS(10)-数据验证
AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据验证</title>
<script src="angular-1.4.1/angular.min.js"></script>
</head>
<body> <h2>数据验证</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(10)-数据验证的更多相关文章
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS入门之数据验证
AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...
- atitit.数据验证--db数据库数据验证约束
atitit.数据验证--db数据库数据验证约束 1. 为了加强账户数据金额的安全性,需要增加验证字段..1 2. 创建帐户1 3. 更改账户2 4. ---code3 5. --fini4 1. 为 ...
- MVC 数据验证【转】
[转自]http://www.cnblogs.com/dozer/archive/2010/04/12/MVC-DataAnnotations.html 作者Dozer 今天在这里给大家介绍一下MVC ...
- MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证
Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...
- [Angularjs]表单验证
写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...
- Aspose Cells 添加数据验证(动态下拉列表验证)
参考 :http://www.componentcn.com/kongjianjishu/kongjianjishu/2015-06-04/2781.html Aspose Cells是一款操作和处理 ...
- struts 数据验证
1. validate()验证 将对页面表单验证的内容写到validate()方法中,实现验证和业务处理内容的分离 在Action中添加 validate()方法 public void vali ...
- avalon2学习教程12数据验证
avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery ...
随机推荐
- SSH Spring3\Java1.8 “Unable to instantiate Action, xxAction, defined for 'xxAction_login' in namespace '/'null”
1.Stacktraces Unable to instantiate Action,xxAction, defined for 'xxAction_login' in namespace '/'nu ...
- Android 高级UI设计笔记02：可以拖动交换item位置的GridView（转载）
如果大家不知道GridView基本使用,可以先参见:Android(java)学习笔记154:使用GridView以及重写BaseAdapter 1. 首先我们明白GridView拖拽的思路: ()根 ...
- Debian 7 升级内核
Debian 7(wheezy)的内核是3.2,要想把内核升级到3.16怎么办呢?使用backports源! 一.添加backports源 打开/etc/apt/source.list文件,加入以下: ...
- 使用NumberPicker定制自己喜欢的Date&TimePicker
1.NumberPicker简介: NumberPicker是Android3.0之后引入的一个控件,主要功能是用于选择一组预定义好数字的控件. 该控件主要需要指导一个用于监听当前value变化的li ...
- ios数据缓存方法
转载自:http://zhidao.baidu.com/link?url=jNTz6lkL1way8bJ-WPY197Pe9aEM_ql-MZbVJsM5tXr7Mv82W70QQ5a9UlvhMMS ...
- 求可能组合VB源码代写
输入1-20的整数n,把从1到n的n个整数摆成一个环,使得该环上任意相邻的两个数之和为素数.求出所有可能组合. 专业程序代写c++程序代写
- agile学习
https://www.flickr.com/photos/codingthearchitecture/sets/
- 关于JDBC和ODBC的区别
转载..... JDBC与ODBC都可以实现类似的功能,但JDBC与ODBC的区别是他们的开发架构不同,其实现细节上也有所差异. 谈到JDBC与ODBC的区别,JDBC和ODBC其实都是用来连接数据库 ...
- Radware中APPDirector系列的Farm Table中的session mode参数说明
Session mode中共有5种会话保持方式:1.Regular,是普通的会话保持,形成的表项是:Client ip+Server ip的形式2.EntryPerSession(EPS),是端口与i ...
- poj 2723 2-SAT问题
思路:二分枚举能开的门的数量,将每次枚举转换成2-SAT问题.这里存在的矛盾是假设有门上a,b两个锁,a锁对应于1号钥匙,而一号钥匙的配对是2号钥匙,b锁对应于3号钥匙,3号的配对是4号钥匙.那么2号 ...