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 ...
随机推荐
- iOS 除去图片的白色背景(接近白色)，或者其它颜色的替换，获取像素点的ARGB值
iOS 除去图片的白色背景(接近白色),或者其它颜色的替换 方法如下: //去除图片的白色背景 + (UIImage*) imageToTransparent:(UIImage*) image { / ...
- Cable master
Description Inhabitants of the Wonderland have decided to hold a regional programming contest. The J ...
- Node.js module.exports和exports的区别
require 用来加载代码,而 exports 和 module.exports 则用来导出代码,从接触node.js就不会它们两陌生,上代码: foo.js exports.a = functio ...
- 无需WEB服务器的WEBServices
本文将介绍如何将Indy控件组与Delphi 6的Web Services (SOAP)支持相结合.关于如何创建Web Services的更多信息,请参阅Nick Hodges的文章,<Web上 ...
- DHCP服务详解
DHCP概念和原理 dhcp服务作用 为大量客户机自动分配地址,提供集中管理 减轻管理和维护成本,提高网络配置效率 可分配的地址信息主要包括: 网卡的IP地址.子网掩码 对应的网络地址 默认网关地址 ...
- LeetCode 268
Missing Number Given an array containing n distinct numbers taken from 0, 1, 2, ..., n, find the one ...
- LeetCode 263
Ugly Number Write a program to check whether a given number is an ugly number. Ugly numbers are posi ...
- [未完成]关于GUI Java图形化界
"笔记内容完成,整体未完成" GUI 图形化用户界面 用java做图形化用户界面的程序不多,大多用C++和defy.因为,Java做图形化效率低. 首先你要安装一个虚拟机,C++是 ...
- SVN更改用户名和密码
关于SVN更换用户名和密码的问题,SVN是一个脚本的扩展软件,但是通过客户端更改用户名和密码的时候比较弱智,必须要经过一些操作之后才能出现更改用户名和密码的对话框. 主要的步骤就是“点击鼠标右键选择T ...
- Linux系统调用（转载）
目录: 1. Linux系统调用原理 2. 系统调用的实现 3. Linux系统调用分类及列表 4.系统调用.用户编程接口(API).系统命令和内核函数的关系 5. Linux系统调用实例 6. Li ...