angular-messages.js信息验证的使用
ngMessages(1.3+)
众所周知,表单和验证是Angular中复杂的组件之一。上面的例子不是特别好,不简洁。在
Angular 1.3发布前,表单验证必须以这种方式编写。
然而在发布的Angular 1.3中,Angular核心做了一个升级。它不再需要基于一个详细的表达式
状态创建元素显示或隐藏(正如我们在本章所做的那样)。
<form name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name"
ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-show="signup_form.name.$dirty && signup_form.name.
$invalid && signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">
Your name is required.</small>
<small class="error" ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters </small>
</div>
</div>
</div>
<button type="submit">Submit</button>
</fieldset>
</form>
本质上这一功能会检查错误对象的状态发生了变化。此外,我们还得到了站点中每个表单需
要的很多额外的和重复的标记。这显然不是一个理想的解决方案。
从1.3开始,Angular中新增了一个ngMessages指令。
安装
安装ngMessages很简单,因为它被打包成了一个Angular模块。首先下载这个模块:
$ bower install --save angular-messages
或者,也可以从angular.org下载该文件并将它保存到项目中。还需要将angular-messages.js这
个JavaScript引入我们的主HTML中:
<script type="text/javascript" src="bower_components/angular-messages/angular-messages.js">
</script>
最后,我们还要告诉Angular将ngMessages作为应用程序的依赖模块引入,就像这样:
angular.module('myApp', ['ngMessages']);
现在,我们已经安装了ngMessages,然后可以马上开始使用它了。使用前面的例子作为基
础,你可以移除ng-show指令,然后使用ngMessages的一个更简洁的实现替换它。
<form name="signup_form" novalidate ng-submit="signupForm()"
ng-controller="signupController"> <label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=
3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">Make sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>
<button type="submit">Submit</button>
</form>
借助ngMessages,表本身比前面的实现更清洁,并且更好理解。
然而对于这个实现,一次只会显示一个错误消息。如果我们想要更新这个实现同时显示所有
的错误将会怎样?很容易。只需在ng-message指令旁边使用ng-messages-multiple属性即可。
<div class="error" ng-messages="signup_form.name.$error" ng-messages-multiple>
<div ng-message="required"> sure you enter your name</div>
<div ng-message="minlength">Your name must be at least 3 characters</div>
<div ng-message="maxlength">Your name cannot be longer than 20 characters</div>
</div>
很多时候这些信息相互之间非常相似。我们可以将它们保存到模板中从而减少麻烦,而不是
重新输入每个字段的错误信息。
<!-- In templates/errors.html -->
<div ng-message="required">This field is required</div>
<div ng-message="minlength">The field must be at least 3 characters</div>
<div ng-message="maxlength">The field cannot be longer than 20 characters</div>
然后我们可以通过在视图中使用ng-messages-include属性引入这个模板来改进这个表单:
<div class+'error' ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
</div>
有时,你可能希望为不同的字段自定义错误信息。没问题,你可以在这个指令内简单地插入
一个自定义错误信息。由于ngMessages涉及ngMessages容器中错误列表的顺序,我们可以通过
在这个指令中列出自定义错误信息的方式覆盖它们。
<div class="error" ng-messages="signup_form.name.$error"
ng-messages-include="templates/errors.html">
<!--除了minlength会被覆盖之外,其他每个信息都会保持不变-->
</div>
此外,甚至还可以为自定义验证创建自定义消息。可以通过修改模型的$ parsers链做到这
一点。
例如,比方说我们想要创建一个自定义验证器验证用户名在一个注册表单中是否有效:
app.directive('ensureUnipue', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
ctrl.$parsers.push(function(val) { // 在这里添加验证
});
}
}
});
对于ngModel,你可以添加可以使用ngMessage指令显示/隐藏的自定义信息。还可以添加可
以使用ngMessage指令检查的带有自定义的消息的指令。例如,改变前面使用ngMessages的例子。
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController"
ensure-unique="/api/checkUsername.json">
<label>
Your name
</label>
<input type="text" placeholder="Username" name="username" ng-model="signup.username"
ng-minlength=3 ng-maxlength=20 required />
<div class="error" ng-messages="signup_form.username.$error">
<div ng-message="required">
Make sure you enter your username
</div>
<div ng-message="checkingAvailability">
Checking...
</div>
<div ng-message="usernameAvailablity">
The username has already been taken. Please choose another
</div>
</div>
<button type="submit">
Submit
</button>
</form>
在这中用法中,我们检查了错误信息的自定义属性。为了添加自定义错误消息,我们将会把
它们应用到自定义ensureUnique指令的ngModel中。
app.directive('ensureUnique', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, ctrl) {
var url = attrs.ensureUnique;
ctrl.$parsers.push(function(val) {
if (!val || val.length === 0) {
return;
}
ngModel.$setValidity('checkingAvailability', true);
ngModel.$setValidity('usernameAvailablity', false);
$http({
method: 'GET',
url: url,
params: {
username: val
}
}).success(function() {
ngModel
.$setValidity('checkingAvailability', false);
ngModel
.$setValidity('usernameAvailablity', true); })['catch'](function() {
ngModel
.$setValidity('checkingAvailability', false);
ngModel
.$setValidity('usernameAvailablity', false);
});
return val;
})
}
}
});
angular-messages.js信息验证的使用的更多相关文章
- angular编写表单验证
angular编写表单验证 一.整体概述 表单内容如下图,包括常用的用户名.密码.确认密码.手机.邮箱等 整体js代码很少,就一个指令用于写确认密码和密码是否相等.其他 验证都是使用angular自带 ...
- js正则表达式验证(化繁为简)
以前用js写正则表达式验证,每一个文本框后面都要添加一个onblur函数,验证的信息少,也没体会到有多繁琐,这次项目中的页面比较多,页面中的信息也比较多,如果每个文本框都加一个验证函数的话,js验证代 ...
- 超简单的js数字验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- JS正则表达式验证账号、手机号、电话和邮箱
JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...
- 手机号码js正则验证
手机号码js正则验证 var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; if (!myreg.test($(" ...
- jquery/js实现验证聚焦,失焦
jquery实现验证聚焦,失焦方法: 我还是喜欢用jquery来实现,不管页面中多少个输入框需要实现聚焦,失焦,都公有,我常用的方法是: 遍历该页面中的input框,获取输入框中的val值,当该输入框 ...
- 【转】Eclipse去除js(JavaScript)验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...
- js不验证
给select添加了id,人家默认就有个id,id冲突导致js不验证
- Js完美验证15/18身份证,Js验证身份证,支持15/18位
Js完美验证15/18身份证,Js验证身份证,支持15/18位 >>>>>>>>>>>>>>>>> ...
随机推荐
- 原!!junit mockito 自定义参数匹配 -- ArgumentMatcher
前两天写单元测试的时候,发现一个dao对象 mock成功了,但是调用该dao对象的某个方法时,并没有按照设定的值返回,而是返回null. 但是记得之前也都是这么写没有碰到问题,直接mock对象,调用方 ...
- element-UI中el-select下拉框可搜索时候,filter-method自定义搜索方法
使用element-UI框架的使用,我们经常使用el-select下拉框,很多时候还需要使用可搜索的下拉框,然后elementUI官网的实例中只是提了一下filter-method可以自定义搜索方法, ...
- pip 查看已安装模块、卸载指定模块、安装指定版本模块
操作背景 最近使用 pandas+numpy+plotly 画heatmap(热力图),来处理股票数据,语法.步骤都没问题,但到画图那一步老是报错,且 plotly 版本为3.1.0: 最后找到原因, ...
- 流畅的python 14章可迭代的对象、迭代器 和生成器
可迭代的对象.迭代器和生成器 迭代是数据处理的基石.扫描内存中放不下的数据集时,我们要找到一种惰性获取数据项的方式,即按需一次获取一个数据项.这就是迭代器模式(Iterator pattern). 迭 ...
- mysql数据库表插入单条数据/批量插入数据
1.创建表格 reate table trade( id int(4) not null primary key auto_increment, product varchar(30) null, p ...
- Config Static IP Address manually in Ubuntu
The process of the configuration of static IP address in Ubuntu is as follows: ``` $ sudo vim /etc/n ...
- Python(名称空间、函数嵌套、函数对象)
一.名称空间: 名称空间 定义:存放名字和值的绑定关系 内置名称空间 python自带的名字,如print.int.str 解释器启动就会生效 全局名称空间 文件级别定义的名字,都会放 ...
- Java分布式:RPC(远程过程调用)
Java分布式:RPC(远程过程调用) 引入RPC 比如我们有一个查询的接口IDBQuery,以及其实现类DBQueryImp,如果我们执行IDBQuery查询方法,只需要new一个DBQueryIm ...
- struts2基础——需要注意的几点
struts是流行和成熟的基于MVC设计模式的web应用程序框架,使用struts可以帮助我们减少运用MVC设计模型来开发web应用的时间. 目录: 一.struts2的工作原理及文件结构 二.三种访 ...
- Codeforces - 55D Beautiful numbers (数位dp+数论)
题意:求[L,R](1<=L<=R<=9e18)区间中所有能被自己数位上的非零数整除的数的个数 分析:丛数据量可以分析出是用数位dp求解,区间个数可以转化为sum(R)-sum(L- ...