AngularJS 表单和控件可以验证输入的数据。

实例

<!DOCTYPE html>

<html>

<script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/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>

AngularJS ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

myForm.user.$invalid

$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

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

  1. 【15】AngularJS 输入验证

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

  2. AngularJS：输入验证

    ylbtech-AngularJS:输入验证 1.返回顶部 1. AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 Ang ...

  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. Direct3D Draw函数 异步调用原理解析

    概述 在D3D10中,一个基本的渲染流程可分为以下步骤: 清理帧缓存: 执行若干次的绘制: 通过Device API创建所需Buffer: 通过Map/Unmap填充数据到Buffer中: 将Buff ...

  2. SQL多表连接查询（详细实例）

    转载博客:joeleo博客(http://www.xker.com/page/e2012/0708/117368.html) 本文主要列举两张和三张表来讲述多表连接查询. 新建两张表: 表1:stud ...

  3. .NET Core采用的全新配置系统[4]: “Options模式”下各种类型的Options对象是如何绑定的？

    旨在生成Options对象的配置绑定实现在IConfiguration接口的扩展方法Bind上.配置绑定的目标类型可以是一个简单的基元类型,也可以是一个自定义数据类型,还可以是一个数组.集合或者字典类 ...

  4. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  5. 【Oracle 集群】Linux下Oracle RAC集群搭建之Oracle DataBase安装（八)

    Oracle 11G RAC数据库安装(八) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总 ...

  6. APP测试入门篇之APP基础知识(001)

    前言        最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...

  7. centos7查看系统版本，查看机器位数x86-64

    前言 由于不经常使用linux,每当使用的时候就是安装软件,安装软件的时候就要选择安装包平台,是32位的还是64位的.这时候突然发现不知道怎么查,于是百度.虽然轻而易举百度出来,但仍旧没有自己的笔记看 ...

  8. [Spring]01_环境配置

    )在资源库界面点击Artifacts标签,然后点击libs-release-local,展开后依次点击org -> springframework -> spring.

  9. [占位-未完成]scikit-learn一般实例之十:核岭回归和SVR的比较

    [占位-未完成]scikit-learn一般实例之十:核岭回归和SVR的比较

  10. C# VLCPlayer视频播放器(附源码)

    VLCPlayer视频播放器. 支持本地播放,支持网络URL.支持全屏,截图. 基于VLCPlayer. 附带基本代码. 下载地址:http://pan.baidu.com/s/1nvjNvID