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. UNIX基础知识之出错处理

    当UNIX函数出错时,常常会返回一个负值,而且整型变量errno通常被设置为含有附加信息的一个值.例如,open函数如成功执行则返回一个非负文件描述符,如出错则返回-1.在open出错时,有大约15种 ...

  2. 百度地图 web定位

    <!DOCTYPE html><html><head><meta charset="utf-8" /><meta name=& ...

  3. query插件之ajaxForm ajaxSubmit的理解用法

    如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如:   $(function(){ $('# ...

  4. You Need This One Skill to Succeed in IT--reference

    The ability to program in five languages, including one machine-level? Not it. Project management sk ...

  5. JavaFX（四）窗口大小自由拉伸

    1.问题场景 同样的,隐藏掉窗体的默认标题栏也会导致窗体大小自由拉伸功能的失效. 2.解决思路 判断鼠标在窗体的位置,改变鼠标样式,给窗体组件添加拖拽事件监听器,根据鼠标移动位置改变窗体大小. 3.代 ...

  6. plsql常用快捷键

    plsql使用技巧 1.类SQL PLUS窗口:File->New->Command Window,这个类似于oracle的客户端工具sql plus,但比它好用多了. 2.设置关键字自动 ...

  7. android代码片段二

      1.Android拦截短信 一.AndroidManifest.xml <uses-permission android:name="android.permission.RECE ...

  8. css3 渐变记

    css3 渐变 线性渐变 径向渐变 重复线性渐变 重复径向渐变 线性渐变 线性渐变接受三个参数,渐变的方向,起始颜色,结束颜色. 标准语法及参数:linear-gradient:([[<angl ...

  9. PYTHON：HTTP头设置工具（以附件名为例）

    import oss2 # 用户授权 auth = oss2.Auth('accessId', 'accessKey')# oss bucket bucket = oss2.Bucket(auth, ...

  10. PHP学习笔记 - 入门篇（5）

    PHP学习笔记 - 入门篇(5) 语言结构语句 顺序结构 eg: <?php $shoesPrice = 49; //鞋子单价 $shoesNum = 1; //鞋子数量 $shoesMoney ...