AngularJS 输入验证

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

输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。

  客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

应用代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="renderer" content="webkit">
  7. <!--360,以webkit内核进行渲染-->
  8. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  9. <!--以最新内核进行渲染。-->
  10. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  11. <!--百度禁止转码-->
  12. <title>moyu demo</title>
  13. <meta name="keywords" content="demo 测试 魔芋">
  14. <meta name="description" content="魔芋的测试示例">
  15. <meta name="robots" content="index,follow">
  16. <!--定义网页搜索引擎索引方式-->
  17. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  19. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  20. <style>
  22. </style>
  23. </head>
  25. <body>
  26. <h2>ValidationExample</h2>
  27. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
  28. <p>用户名:
  29. <br>
  30. <input type="text" name="user" ng-model="user" required>
  31. <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  32. <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  33. </span>
  34. </p>
  35. <p>邮箱:
  36. <br>
  37. <input type="email" name="email" ng-model="email" required>
  38. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  39. <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  40. <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  41. </span>
  42. </p>
  43. <p>
  44. <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  45. myForm.email.$dirty && myForm.email.$invalid">
  46. </p>
  47. </form>
  48. <script>
  49. var app = angular.module('myApp',[]);
  50. app.controller('validateCtrl',function($scope){
  51. $scope.user ='John Doe';
  52. $scope.email ='john.doe@gmail.com';
  53. });
  54. </script>
  55. </body>
  57. </html>
 
  HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例解析

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

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

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

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

  1. AngularJS 输入验证

    AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bd ...

  2. AngularJS：输入验证

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

  3. AngularJS学习之输入验证

    1.AngularJS可以验证表单和控件可以验证输入的数据: 2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的: 3.应用实例: <! DOCTYPE html& ...

  4. 【Asp.net入门15】第一个Asp.net应用程序-输入验证

    前言 所谓输入验证,顾名思义就是验证用户输入符不符合要求.前面我们已经完成了这个简单的应用程序,但还有一个问题需要解决:用户可以在Default.aspx窗体中 提交任何数据,甚至可以提交根本不包含任 ...

  5. AngularJS（五）：表单及输入验证

    本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...

  6. [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  7. AngulairJS表单输入验证与mvc

    AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...

  8. formValidator输入验证、异步验证实例 + licenseImage验证码插件实例应用

    实例技术:springmvc 实现功能:完整用户登录流程.输入信息规则校验.验证码异步校验. 功能清单: 1.springmvc控制器处理get请求(/member/login.html),进行静态页 ...

  9. Struts2入门(四)——数据输入验证

    一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...

随机推荐

  1. JVM系列-类加载机制

    简介 在java中,类的声明周期总共分为以下几种: 加载(Loading),验证(Verification),准备(Preparation),解析(Analysis), 初始化(Initializat ...

  2. GG_DataAccess 数据库访问层使用dapper操作

    3.5.GG_DataAccess 数据库访问层使用dapper操作 和Model实体类同理,tt模板已写好,需要的可加qq群:547765059  自己下载.

  3. Matlab vs Python 作图

    -- Matlab 作图示例 x=-3:0.00003:3; y1=sin(x)./x; y2=x./sin(x); plot(x,y1,x,y2); -- Python 作图示例 import nu ...

  4. Code Kata:大整数四则运算—除法 javascript实现

    除法不可用手工算法来计算,其基本思想是反复做减法,看从被除数里面最多能减去多少个除数,商就是多少. 除法函数: 如果前者绝对值小于后者直接返回零 做减法时,不需要一个一个减,可以以除数*10^n为基数 ...

  5. css样式获取及兼容性（原生js）

    类选择器兼容性 getbyclass()类选择器,在IE8及以下均不可用. // 类选择器的兼容性 function getbyclass(parentName,Name){ var parentNa ...

  6. [算法天天练] - C语言实现约瑟夫环（2）

    Linux下 #include <stdlib.h>#include <stdio.h> int main(){ int n,m,i,s = 0; printf("E ...

  7. IT项目为什么失败 --美国IT项目管理硕士笔记(一)

    IT项目为什么失败 什么是项目   项目可以被看作任何一系列的活动和任务.这些活动和任务有一个特定目标需要在特定要求下完成,并有一个明确的开始结束日期和资金限制(如果有).项目需要消耗人力或非人力资源 ...

  8. Qt 杂记——QTableWidget列表添加、删除（备份）

    1.列表的添加 需求:向一个有两列的Table中添加一条数据 思路:新建一个inputDialog,通过按钮打开Qt自带的inputDialog,传递回输入的数据,再添加到列表中 界面: 代码: in ...

  9. Java入门第37课——猜字母游戏之设计数据结构

    问题        有猜字母游戏,其游戏规则为:程序随机产生5个按照一定顺序排列的字符作为猜测的结果,由玩家来猜测此字符串.玩家可以猜测多次,每猜测一次,则由系统提示结果.如果猜测的完全正确,则游戏结 ...

  10. CAD在一个点构造选择集

    主要用到函数说明: IMxDrawSelectionSet::SelectAtPoint 在一个点构造选择集.详细说明如下: 参数 说明 [in] IMxDrawPoint* point 点坐标 [i ...