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. 信号之sleep函数

    #include <unistd.h> unsigned int sleep(unsigned int seconds); 返回值:0或未休眠够的秒数 此函数使调用进程被挂起,直到满足以下 ...

  2. php的引用&（就是在变量或者函数、对象等前面加上&符号）

    官方文档: 1.引用是什么:http://www.php.net/manual/zh/language.references.whatare.php 2.引用做什么:http://www.php.ne ...

  3. ASP.NET MVC 之 路由配置

    主要操作在App_Start 目录下的 RouteConfig.cs 文件. 一.Url构造方式 1.命名参数规范+匿名对象 routes.MapRoute( name: "Default& ...

  4. 使用OPC的方式去连接PLC进行AB SLC-5_04数据的采集

    1.  必备软件 Rslinx classic 2.57 .net framework 2.0 VS2013 OS: win7 enterprise x64 2.  软件安装 2.1.安装RSlinx ...

  5. JS的replace方法【转】

    replace() 方法的参数 replacement 可以是函数而不是字符串.在这种情况下,每个匹配都调用该函数,它返回的字符串将作为替换文本使用.该函数的第一个参数是匹配模式的字符串.接下来的参数 ...

  6. Xquartz远程访问linux

    实验环境:mac 操作系统:         OS X 10.9.4 Mavericksmac IP                      192.168.1.106XQuartz:       ...

  7. PHP底层的运行机制与原理

    PHP说简单,但是要精通也不是一件简单的事.我们除了会使用之外,还得知道它底层的工作原理. PHP是一种适用于web开发的动态语言.具体点说,就是一个用C语言实现包含大量组件的软件框架.更狭义点看,可 ...

  8. 有关ftp4j的FTPListParseException异常

    昨天换了个ftp服务器,发现程序出现了异常it.sauronsoftware.ftp4j.FTPListParseException,网上搜了下,说是FTPClient.list()时it.sauro ...

  9. [改善Java代码]子列表只是原列表的一个视图

    List接口提供了subList方法,其作用是返回一个列表的子列表.这与String类的subString有点类似.但是他们的功能是否相同?看代码: import java.util.ArrayLis ...

  10. Linux串口编程（转载）

    在嵌入式Linux中,串口是一个字设备,访问具体的串行端口的编程与读/写文件 的操作类似,只需打开相应的设备文件即可操作.串口编程特殊在于串 口通信时相关参数与属性的设置.嵌入式Linux的串口编程时 ...