AngularJS 输入验证

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

输入验证

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

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

应用代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="renderer" content="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.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...

随机推荐

DNS中的AC、rndc、智能DNS解析和基础排错
bind中的ACL和rndc DNS除了服务器外,还具有一些访问控制和视图功能. 访问控制是指仅对定义的网络进行解析,视图也就是智能解析. 1>访问控制是通过acl函数来实现的,acl把一个或多 ...
【计蒜客习题】取石子游戏(gcd)
问题描述蒜头君和花椰妹在玩一个游戏,他们在地上将 n 颗石子排成一排,编号为 1 到 n.开始时,蒜头君随机取出了 2 颗石子扔掉,假设蒜头君取出的 2 颗石子的编号为 a, b.游戏规则如下,蒜头 ...
[转]C语言字符串操作总结大全(超详细)
1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...
2017西安网络赛B_Coin
样例输入 2 2 1 1 3 1 2 样例输出 500000004 555555560 思路: n重伯努利实验概率分布题. 设q=1-p,p为事件概率. Y为出现偶数次的概率. 所以 Y=1/2*( ...
利用Openfiler配置基于文件系统的网络存储
一.Openfiler简介 Openfiler是一个操作系统,其提供基于文件的网络附加存储和基于块的存储区域网络功能. Openfiler支持的网络协议包括:NFS,SMB/CIFS,HTTP/Web ...
安装Kali里的应用程序或软件包
安装Kali里的应用程序或软件包安装额外的软件是apt-get命令最基本的功能了,命令非常简单易懂.安装软件包的语法如下: apt-get install 软件包名比如,安装图像编辑软件gimp, ...
类函数：string、math
类:系统内置的处理字符串类型的函数方法类. string是String的快捷方式.所包含的内容都是一样的. Int i=x.length;//获取一个字符串长度字符串中,索引号从0开始 String ...
WebApi实现IHttpControllerSelector问题
一.让Web API路由配置也支持命名空间参数/// <summary> /// controller /// 选择器 /// </summary> ...
Redis作者：深度剖析Redis持久化
Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等优势.它虽然起步较晚,但发展却十分迅速. 近日,Redis的作者在博客中写到, ...
为什么字符串类型可以调用构造函数String的方法，却又不是它的实例
从所周知,在js中定义一个字符串我们有两种办法: var a = new String("a"); var a = "a"; 第一种方法使用构造函数创建,作为S ...