AngularJS：输入验证
| ylbtech-AngularJS：输入验证 |
| 1.返回顶部 |
AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
输入验证
在前面的几个章节中，你已经学到关于 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>
|
HTML 表单属性 novalidate 用于禁用浏览器默认的验证。 |
|---|
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件的 $dirty 或 $invalid 都为 true 时才显示。
| 属性 | 描述 |
|---|---|
| $dirty | 表单有填写记录 |
| $valid | 字段内容合法的 |
| $invalid | 字段内容是非法的 |
| $pristine | 表单没有填写记录 |
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
AngularJS：输入验证的更多相关文章
- 【15】AngularJS 输入验证
AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 客户端的验证不能确保用 ...
- AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bd ...
- AngularJS学习之输入验证
1.AngularJS可以验证表单和控件可以验证输入的数据: 2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的: 3.应用实例: <! DOCTYPE html& ...
- AngularJS（五）：表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
- AngulairJS表单输入验证与mvc
AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...
- Struts2入门(四)——数据输入验证
一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...
- javascript设计模式实践之策略模式--输入验证
策略模式中的策略就是一种算法或者业务规则,将这些策略作为函数进行封装,并向外提供统一的调用执行. 先定义一个简单的输入表单: <!DOCTYPE html> <html> &l ...
- struts2输入验证
1.方法 ① 基于Annotations的验证 ②基于XML配置的验证 http://blog.csdn.net/furongkang/article/details/692204 ...
- [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
随机推荐
- maven setting.xml 存放位置导致deply失败，显示没有权限401错误
settings.xml存在于两个地方: 1.安装的地方:$M2_HOME/conf/settings.xml 2.用户的目录:${user.home}/.m2/settings.xml 我只在mav ...
- echache缓存的简单使用方法
1.需要echache的jar包 2.需要配置文件ehcache.xml和ehcache.xsd,主要是在ehcache.xml中进行配置 3.修改配置文件ehcache.xml ,例如添加配置如下 ...
- Anton and School - 2 （组合数学）
题意:给你一串只有‘(’与‘)’的字符串,问你多少对括号,括号一定是左边一半的‘(’,右边一半是‘)’ )(()() 答案是:6 题解:枚举每个‘(’,此时设左括号左边有n个‘(’,它右边有m个‘ ...
- Hibernate 关于实体映射常用注解
注解 类注解(写在类上面的) @Entity 标明实体类 @Table(name="数据库标明") 生成数据库时的表名由这个决定 @DynamicInsert ...
- JProgressBar与Timer的配套使用
JProgressBar 的关键在于 setMaxium(int maxValue) 和 setValue(int progressValue); 当ProgressBar的当前值需要Control ...
- 有关linux下redis overcommit_memory的问题，有需要的朋友可以参考下。
我在安装redis-4.0.6后,启动时出现一些问题,如下: :M Jan ::! Background save may fail under low memory condition. To fi ...
- ThreadPool(线程池）
WPF使用ThreadPool.QueueUserWorkItem线程池防界面假死 时间:2012-01-09 20:44来源:http://luacloud.com 作者:luacloud 点击:1 ...
- 5.2 Selenium2环境搭建
1.Java开发环境的搭建 本课程中将使用Java语言编写Selenium自动化测试脚本,在Eclipse集成开发环境中运行. (1)jdk的安装 a.下载 官网下载,http://www. ...
- cassandra集群环境搭建——注意seeds节点，DHT p2p集群管理难道初始化都应如此吗？
解压cassandra的安装包后可以查看主要的配置文件,都在conf/目录下,conf/cassandra.yaml比较重要,其中需要着重注意的有以下一些配置项: cluster_name: 'TC0 ...
- NodeJs学习之API篇
学习nodeJS的API在对于使用nodeJS来进行编程的是十分重要的,所以首先就要去学习看看,相关的node的模块,来看一看相关的内容和可用性. 正文篇: nodeJS的API学习之路.(这里我们将 ...