【15】AngularJS 输入验证

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="author" content="魔芋,[email protected],http://www.cnblogs.com/moyuling/">
  16. <meta name="robots" content="index,follow">
  17. <!--定义网页搜索引擎索引方式-->
  18. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  20. <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
  21. <style>
  23. </style>
  24. </head>
  26. <body>
  27. <h2>ValidationExample</h2>
  28. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
  29. <p>用户名:
  30. <br>
  31. <input type="text" name="user" ng-model="user" required>
  32. <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  33. <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
  34. </span>
  35. </p>
  36. <p>邮箱:
  37. <br>
  38. <input type="email" name="email" ng-model="email" required>
  39. <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  40. <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
  41. <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
  42. </span>
  43. </p>
  44. <p>
  45. <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
  46. myForm.email.$dirty && myForm.email.$invalid">
  47. </p>
  48. </form>
  49. <script>
  50. var app = angular.module(‘myApp‘,[]);
  51. app.controller(‘validateCtrl‘,function($scope){
  52. $scope.user =‘John Doe‘;
  53. $scope.email =‘[email protected]‘;
  54. });
  55. </script>
  56. </body>
  58. </html>

  HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

实例解析

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

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

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

属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
时间： 2024-11-05 06:03:56

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

AngularJS 输入验证

AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告. 注意:客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"&g

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

前言 所谓输入验证,顾名思义就是验证用户输入符不符合要求.前面我们已经完成了这个简单的应用程序,但还有一个问题需要解决:用户可以在Default.aspx窗体中 提交任何数据,甚至可以提交根本不包含任何数据的窗体.我们需要确保用户填写了所有窗体字段, 以便收集所有相关数据,知道谁会参加晚会,谁拒绝参加晚会.下面的内容就是教你如何实现这个验证过程. 主要内容 客户端验证和服务器端验证的概念 数据注解用法 操作和分析 ASP.NET提供了各种不同的验证方法,最常用的方法是对数据模型类应用特性来实现验

中文输入验证AngularJS版

<!DOCTYPE html><html ng-app="myApp" ng-controller="myCtrl" ><head lang="en"> <meta charset="UTF-8"> <title>T63-中文输入验证AngularJS版</title> <script src="js/angular.js" ty

Struts2之输入验证

摘要:Struts2提供了安全的服务器验证方法,使用action中的validate方法即可 下面将展现简单的输入验证怎么写 1,表单index.jsp代码如下: 1 <%@ page language="java" import="java.util.*" pageEncoding="GBK" contentType="text/html; charset=GBK"%> 2 <%@ taglib uri=&

用户输入验证的集总

1 一.用户输入验证 2 1.编程方式: 3 动作类中的所有方法进行验证: 4 5 步骤: 6 a.动作类继承ActionSupport 7 b.覆盖调用public void validate()方法 8 c.在validate方法中,编写不符合要求的代码判断,并调用父类的addFieldError(String fieldName,String errorMessage) 9 如果fieldError(存放错误信息的Map)有任何的元素,就是验证不通过,动作方法不会执行. 10 Struts

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

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

Struts2的输入验证（三）-短路验证与非字段验证

一.短路验证 若对一个字段使用多个验证器,默认情况下会执行所有的验证.若希望前面的验证器验证没有通过,后面的就不再验证,可以使用短路验证. 1)对同一个字段内的多个验证器,如果一个短路验证器验证失败,其他验证器不会继续校验 2)验证程序配置文件中<validator  …/> 元素和 <field-validator  …/> 元素可以指定一个可选的 short-circuit 属性,该属性指定该验证器是否是短验证器,默认值为 false. 1.示例:短路验证器 要求:为age字段

AngulairJS表单输入验证与mvc

AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$error    表单验证不通过的错误验证信息. 2.验证时,需给表单及需要验证的input设置name属性 给form和input设置name后,会将form表单信息,默认绑定到$scope作用域中.故,可以使用formName.inputname.$验证操作得到验证结果 例如:formName.

iOS输入验证 正则 NSPredicate

iOS输入验证 正则 NSPredicate NSPredicate NSPredicate *pred = [NSPredicate predicateWithFormat:@"SELF MATCHES %@",pattern]; Format: (1)比较运算符>,<,==,>=,<=,!= 可用于数值及字符串 例:@"number > 100" (2)范围运算符:IN.BETWEEN 例:@"number BETWEEN