ylbtech-AngularJS：输入验证
1.返回顶部
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、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

AngularJS：输入验证的更多相关文章

  1. 【15】AngularJS 输入验证

    AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告.   客户端的验证不能确保用 ...

  2. AngularJS 输入验证

    AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bd ...

  3. AngularJS学习之输入验证

    1.AngularJS可以验证表单和控件可以验证输入的数据: 2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的: 3.应用实例: <! DOCTYPE html& ...

  4. AngularJS（五）：表单及输入验证

    本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...

  5. AngulairJS表单输入验证与mvc

    AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...

  6. Struts2入门(四)——数据输入验证

    一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...

  7. javascript设计模式实践之策略模式--输入验证

    策略模式中的策略就是一种算法或者业务规则,将这些策略作为函数进行封装,并向外提供统一的调用执行. 先定义一个简单的输入表单: <!DOCTYPE html> <html> &l ...

  8. struts2输入验证

    1.方法     ① 基于Annotations的验证       ②基于XML配置的验证 http://blog.csdn.net/furongkang/article/details/692204 ...

  9. [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

随机推荐

  1. 《机器学习基石》第一周 —— When Can Machine Learn?

    (注:由于之前进行了吴恩达机器学习课程的学习,其中有部分内容与机器学习基石的内容重叠,所以以下该系列的笔记只记录新的知识) <机器学习基石>课程围绕着下面这四个问题而展开: 主要内容: 一 ...

  2. 【codevs2011】最小距离之和 [LNOI2013](Floyd)

    题目网址:http://codevs.cn/problem/2011/ 题目大意:有一个图,每次删一条边(可以重复删),求每次删边之后所有点对的最短距离之和. 看了一眼题目,顿时发现了O(n^4)的暴 ...

  3. netty上手

    关于netty的基础NIO,请参见:NIO原理及实例 下面介绍Netty的上手使用: 首先为项目添加jar依赖: <dependency> <groupId>io.netty& ...

  4. mysql基础（3）-高级查询

    聚合函数 count 返回查询结果的条数 max 返回查询结果的最大值 min 返回查询结果的最小值 sum 返回查询结果的和 avg 返回查询结果的平均值   统计分数大于等于90的人数: mysq ...

  5. 安装Tomcat服务器以及错误汇总（tomcat8.0、jdk8）

    Tomcat安装和启动 一.下载Tomcat 你可以直接百度Tomcat官网, 或者,直接在地址栏输入他的官网地址:http://tomcat.apache.org/,然后进入他的主页,在主页左侧可以 ...

  6. Efficient live disk backup with active blockcommit

    列出当前正在使用的block device $ virsh domblklist vm1 Target Source ----------------------------------------- ...

  7. iOS中,Framework和.a的打包及使用

    最近在做一个小项目,需要给客户一个demo测试,有一部分核心代码暂时不想让客户知道,就想到了打包成framework或.a库.库有两种: 静态库:.a和.framework 动态库:.tbd和.fra ...

  8. ActionContext实现原理

    StrutsPrepareAndExecuteFilter [http://www.tuicool.com/articles/NVNbYn] struts2 和 struts1 的一个重要区别就是它进 ...

  9. python中的变量与对象

    一. 什么是变量 变量就是以前学习的数学中常见的等式x = 3(x是变量,3是变量值),在编程中,变量不仅可以是数学,还可以是任意数据类型 二. 变量的命名规则 变量名必须是英文大小写.数字和_的组合 ...

  10. 【WPF】命令系统

    引言 在MVVM模式开发下,命令Command是编程中不可或缺的一部分.下面,我分3种场景简单介绍一下命令的用法. ViewModel中的命令 在ViewModel定义命令是最常用的用法,开发中几乎9 ...