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)-数据验证的更多相关文章

  1. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. AngularJS入门之数据验证

    AngularJS自带了对表单或控件的输入数据进行验证的功能,对于Html5的基础控件均有内建的验证器,以下列举了所有支持的验证类型: email max maxlength min minlengt ...

  3. atitit.数据验证--db数据库数据验证约束

    atitit.数据验证--db数据库数据验证约束 1. 为了加强账户数据金额的安全性,需要增加验证字段..1 2. 创建帐户1 3. 更改账户2 4. ---code3 5. --fini4 1. 为 ...

  4. MVC 数据验证【转】

    [转自]http://www.cnblogs.com/dozer/archive/2010/04/12/MVC-DataAnnotations.html 作者Dozer 今天在这里给大家介绍一下MVC ...

  5. MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证

    Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-server-side-validation.html 系列 ...

  6. [Angularjs]表单验证

    写在前面 在开发中提交表单,并对表单的值进行验证是非常常见的操作,angularjs对表单验证提供了非常好的支持. demo 表单 <form name="myform" n ...

  7. Aspose Cells 添加数据验证(动态下拉列表验证)

    参考 :http://www.componentcn.com/kongjianjishu/kongjianjishu/2015-06-04/2781.html Aspose Cells是一款操作和处理 ...

  8. struts 数据验证

    1. validate()验证 将对页面表单验证的内容写到validate()方法中,实现验证和业务处理内容的分离 在Action中添加 validate()方法   public void vali ...

  9. avalon2学习教程12数据验证

    avalon2砍掉了不少功能(如ms-include,ms-data),腾出空间加了其他更有用的功能.数据验证就是其中之一.现在avalon2内置的验证指令是参考之前的oniui验证框架与jquery ...

随机推荐

  1. php中常用设置

    设置SESSION的生命周期 今天我所要想解决的问题,简单来说,就是设置SESSION的生命周期问题,其实问题是很简单了,只是不知道为什么,我用session_cache_expire(12*60); ...

  2. Windows下用Eclipse搭建C/C++开发环境

    本文假定你已经熟悉Java,Eclipse的安装,并能顺利启动和运行Eclipse.此外因为各软件版本在不断更新,有些地方可能不准确,以最新的.原文资料为准. 距上一次写和调C++程序,已经5.6年了 ...

  3. 让 BAT 的 Offer 不再难拿

    随着各大公司春招的开始,很多小伙伴都行动起来了,我有幸能够加入百度并和大家分享自己的经验心得.由于我面试的都是比较大的公司,所以自然也是做了这方面的准备,因此这篇总结并不一定适合想去创业公司的同学.另 ...

  4. 那些著名或非著名的iOS面试题－前编

    1.如何追踪app崩溃率,如何解决线上闪退 当iOS设备上的App应用闪退时,操作系统会生成一个crash日志,保存在设备上.crash日志上有很多有用的信息,比如每个正在执行线程的完整堆栈跟踪信息和 ...

  5. 数据库SQLite应用

    1.导入SQLite库和头文件 #import <sqlite3.h> 2.打开数据库,如果在打开的时候遇到了问题,则关闭它并抛出一个断言错误. sqlite3 * database; i ...

  6. Cookie和Session(session过程和设置进程外session)

    cookie 和  session 的区别 cookie 是保存在客户端上的一种机制   而session 是保存在服务端的一种机制 cookie的理解: 打个简单的比方,一个人生病了去A医院看病,回 ...

  7. jq选择器 第一部分

    没有什么新意,全是从网上摘抄的,如果哪天忘了,就来查查吧. 1. id选择器(指定id元素) 将id="one"的元素背景色设置为黑色.(id选择器返单个元素) $(documen ...

  8. 不支持关键字：metadata

    将 string sqlConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["Cos ...

  9. python(1) - 第一个程序 Hello World!

    进入python3的解释器环境. 我们让解释器输出 “Hello World!” 解释器成功的输出了Hello world!  程序就这样完成了. 当然上面的程序我们是在解释器中完成的. 我们可以通过 ...

  10. C++之类的构造函数，不得不学明白的重点

    一.认识构造函数 当创建一个类类型对象时,类通过一个或者几个特殊的成员函数来控制对象的初始化,这种函数就是构造函数.它的任务就是用来初始化类对象的成员的,所以当创建类对象或者类对象被创建就会调用构造函 ...