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. l​i​n​u​x添加​修​改​用​户​名​密​码

    语 法: useradd [-mMnr][-c <备注>][-d <登入目录>][-e <有效期限>][-f <缓冲天数>][-g <群组> ...

  2. C#_判断2个对象的值是否相等

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. JS中URL编码参数(UrlEncode)

    JS中URL编码参数(UrlEncode) 网上有很多文字作品写涉及在JS中呈现类似UrlEncode功能时都是自定义参数来呈现,其实JS中本身就有那样的参数.参数parameter由于用类似URL的 ...

  4. HttpClient设置代理，超时，以及得到cookies

    import java.net.URI; import java.util.List; import org.apache.http.HttpEntity; import org.apache.htt ...

  5. IDL中File_Search函数用法详解(转)

    来自:http://blog.sina.com.cn/s/blog_764b1e9d01014ajp.html 在利用IDL进行批处理时,通常用到file_search函数进行输入路径文件的搜索,现根 ...

  6. CSS skills: 6) auto hide the top bar javascript

    //jquery $(document).ready(function(){ $(window).scroll(function() { $(this).scrollTop() > 10 ? $ ...

  7. [未完成]关于Maven的使用总结

    什么是maven 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 什么是理想的项目构建? 高度自动化,跨平台,可重用的组件, ...

  8. nmap命令-----高级用法

    探测主机存活常用方式 (1)-sP :进行ping扫描 打印出对ping扫描做出响应的主机,不做进一步测试(如端口扫描或者操作系统探测):  下面去扫描10.0.3.0/24这个网段的的主机 nmap ...

  9. Sharepoint中出现webpart部署之后却找不到的一种情况

    今天遇到了一个很奇怪的问题,明明代码没有任何问题,部署之后却没有找到添加的webpart,在(web Parts)Galleries中也找不到,最后才发现可能是和服务器的运行速度有关,就像之前遇到的问 ...

  10. 初学JSP+Servlet常见的错误

    web编程中常见的错误: 一.404(要访问的资源没有找到) 1.web程序有没有部署(将项目到tomcat中) 2.url有没有写错(包括大小写,包括项目有没有重命名) 3.有没有将jsp/html ...