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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
jquery做的一个简单的屏幕锁定提示框
Mar 26 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
PHP可变变量学习小结
2015/11/29 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
浅谈js闭包理解
2019/03/28 Javascript
vue获取form表单的值示例
2019/10/29 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
python使用多线程不断刷新网页的方法
2015/03/31 Python
深入浅析Python字符编码
2015/11/12 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
Python中Numpy mat的使用详解
2019/05/24 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
演讲稿怎么写才完美
2014/01/02 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
小学生作文批改评语
2014/12/25 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
超强台风观后感
2015/06/09 职场文书
生活小常识广播稿
2015/08/19 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
python实现语音常用度量方法的代码详解
2021/05/25 Python
解析python中的jsonpath 提取器
2022/01/18 Python