【15】AngularJS 输入验证
AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据。
输入验证
AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
| 客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。 |
应用代码
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8"><meta name="renderer" content="webkit"><!--360,以webkit内核进行渲染--><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><!--以最新内核进行渲染。--><meta http-equiv="Cache-Control" content="no-siteapp"/><!--百度禁止转码--><title>moyu demo</title><meta name="keywords" content="demo 测试 魔芋"><meta name="description" content="魔芋的测试示例"><meta name="robots" content="index,follow"><!--定义网页搜索引擎索引方式--><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script><style></style></head><body><h2>ValidationExample</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>
| HTML 表单属性 novalidate 用于禁用浏览器默认的验证。 |
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性： user 和 email。
我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。
| 属性 | 描述 |
|---|---|
| $dirty | 表单有填写记录 |
| $valid | 字段内容合法的 |
| $invalid | 字段内容是非法的 |
| $pristine | 表单没有填写记录 |
【15】AngularJS 输入验证的更多相关文章
- AngularJS 输入验证
AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bd ...
- AngularJS：输入验证
ylbtech-AngularJS:输入验证 1.返回顶部 1. AngularJS 输入验证 AngularJS 表单和控件可以验证输入的数据. 输入验证 在前面的几个章节中,你已经学到关于 Ang ...
- AngularJS学习之输入验证
1.AngularJS可以验证表单和控件可以验证输入的数据: 2.输入验证:客户端不能确保用户输入数据的安全,所以服务器端的数据验证也是必须的: 3.应用实例: <! DOCTYPE html& ...
- 【Asp.net入门15】第一个Asp.net应用程序-输入验证
前言 所谓输入验证,顾名思义就是验证用户输入符不符合要求.前面我们已经完成了这个简单的应用程序,但还有一个问题需要解决:用户可以在Default.aspx窗体中 提交任何数据,甚至可以提交根本不包含任 ...
- AngularJS（五）：表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
- [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- AngulairJS表单输入验证与mvc
AngulairJS表单输入验证 1.表单中,常用的验证操作有:$dirty 表单有填写记录.$valid 字段内容合法的.$invalid 字段内容是非法的.$pristine 表单没有填写记录.$ ...
- formValidator输入验证、异步验证实例 + licenseImage验证码插件实例应用
实例技术:springmvc 实现功能:完整用户登录流程.输入信息规则校验.验证码异步校验. 功能清单: 1.springmvc控制器处理get请求(/member/login.html),进行静态页 ...
- Struts2入门(四)——数据输入验证
一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...
随机推荐
- ssh使用秘钥文件连接提示WARNING: UNPROTECTED PRIVATE KEY FILE!（转载）
转自:http://www.01happy.com/ssh-unprotected-private-key-file/ 在centos 6.4下使用ssh连接远程主机时,用的是另外一个密钥,需要用-i ...
- PCB Genesis加邮票孔(弧与弧)实现算法
一.Genesis加邮票孔(弧与弧)实现算法 1.鼠标点击位置P点(可以确认搜索区域位置,确认点击位置周边元素分区,此所讲算法未应用到P点坐标) 2.求出:P1C与P2C (线与弧最近点距离的2个点) ...
- 10.11 NOIP模拟题(1)
/* 离散化 差分 */ #include<bits/stdc++.h> #define N 4000007 using namespace std; int n,ans; int tmp ...
- 洛谷P5398 [Ynoi2018]GOSICK（二次离线莫队）
题面 传送门 题解 维包一生推 首先请确保您会二次离线莫队 那么我们现在的问题就是怎么转移了,对于\(i\)和前缀\([1,r]\)的贡献,我们拆成\(b_i\)和\(c_i\)两部分,其中\(b_i ...
- 浅谈.net remoting 与 webservice
1. .NET Remoting .NET Remoting是微软随.NET推出的一种分布式应用解决方案,被誉为管理应用程序域之间的 RPC 的首选技,它允许不同应用程序域之间进行通信(这里的通信可以 ...
- dubbo与zookeeper学习中的问题
环境: spring5.1.5 dubbo 2.6.2 异常信息: java.lang.NoClassDefFoundError: org/apache/curator/RetryPolicy at ...
- STL容器迭代过程中删除元素技巧(转)
1.连续内存序列容器(vector,string,deque) 序列容器的erase方法返回值是指向紧接在被删除元素之后的元素的有效迭代器,可以根据这个返回值来安全删除元素. vector<in ...
- hashtable的用法
C#中哈希表(HashTable)的用法详解 1. 哈希表(HashTable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器 ...
- Angular——单页面实例
基本介绍 1.引入的route模块可以对路由的变化做出响应 2.创建的控制器中依然需要$http向后台请求数据 3.php中二维数据的遍历用的是foreach 4.php中$arr=array(),$ ...
- Spartan6系列之SelectIO深入详解及高级应用简介
1. 什么是I/O Tile? 对Spartan-6系列FPGA来说,一个IO Tile包括2个IOB.2个ILOGIC.2个OLOGIC.2个IODELAY. 图 1Spartan-6系列 ...