AngularJS 输入验证详解及实例代码


Posted in Javascript onJuly 28, 2016

AngularJS 输入验证

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"></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>

运行结果:

 验证实例

用户名:

邮箱:

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

实例解析

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

模型对象有两个属性: user email

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

 

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

 以上就是对AngularJS 输入验证的资料整理,后续继续补充,希望能帮助学习的同学。

Javascript 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue中轮训器的使用
Jan 27 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
jquery实用技巧之输入框提示语句
Jul 28 #Javascript
jQuery stop()用法实例详解
Jul 28 #Javascript
AngularJS中的表单简单入门
Jul 28 #Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 #Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 #Javascript
AngularJS 模块详解及简单实例
Jul 28 #Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
You might like
php表单转换textarea换行符的方法
2010/09/10 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
javascript 常用功能总结
2012/03/18 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
axios学习教程全攻略
2017/03/26 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
利用pyshp包给shapefile文件添加字段的实例
2019/12/06 Python
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
自我推荐书
2013/12/04 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
酒后驾车标语
2014/06/30 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js