【AngularJS】 2.0 版本发布
【AngularJS】 2.0 版本发布
w5cValidator【AngularJS】 2.0 版本发布
w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些错误提示的功能,让大家不用在每个表单上写一些提示信息的模板,专心的去实现业务逻辑。
关于v1.x版本的介绍参见:http://www.ngnice.com/posts/69f774dc4d3190
v1.0版本虽然简单的实现了想要的功能,但是没有按照模块独立出来,而且有很多代码不是很规范,这次正好抽时间重构了代码,直接升级到了 v2.0.0版本,同时也完善了一些展示案例功能。
如果你已经足够了解了angular或者之前使用过 w5cValidator,可以直接看展示程序:
使用步骤:
- HTML 中引用 dest/w5cValidator.js;
- 启动module引用 "w5c.validator",如:
var app = angular.module("app", ["w5c.validator"]);
在
app.config
事件中配置全局属性和显示规则:12345678910111213141516171819202122232425262728app.config([
"w5cValidatorProvider"
,
function
(w5cValidatorProvider) {
// 全局配置
w5cValidatorProvider.config({
blurTrig :
false
,
showError :
true
,
removeError:
true
});
w5cValidatorProvider.setRules({
email : {
required:
"输入的邮箱地址不能为空"
,
email :
"输入邮箱地址格式不正确"
},
username: {
required:
"输入的用户名不能为空"
,
pattern :
"用户名必须输入字母、数字、下划线,以字母开头"
},
password: {
required :
"密码不能为空"
,
minlength:
"密码长度不能小于{minlength}"
,
maxlength:
"密码长度不能大于{maxlength}"
},
number : {
required:
"数字不能为空"
}
});
}]);
在HTML模板中form上使用指令 w5c-form-validate 和 w5c-submit
w5c-form-validate指令表示该表单采用 w5cValidator的验证规则;
w5c-submit 表示验证成功后调用的事件,当然w5c-submit可以不填写;<form class="form-horizontal w5c-form demo-form" role="form" w5c-submit="vm.saveEntity()"
w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
<div class="form-group">
<label class="col-sm-2 control-label">邮箱</label> <div class="col-sm-10">
<input type="email" name="email" ng-model="entity.email" required="" class="form-control"
placeholder="输入邮箱">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label> <div class="col-sm-10">
<input required="" ng-pattern="/^[A-Za-z]{1}[0-9A-Za-z_]{1,19}$/" ng-model="entity.name"
class="form-control" name="username" placeholder="输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label> <div class="col-sm-10">
<input type="password" required="" ng-model="entity.password" name="password"
class="form-control" ng-minlength="5" ng-maxlength="15"
placeholder="输入密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">数字</label> <div class="col-sm-10">
<input type="number" required="" ng-model="entity.number" name="number" class="form-control"
placeholder="输入数字">
</div>
</div>
<div class="form-group" ng-show="validateForm.$errors.length > 0 && vm.showErrorType == 2">
<label class="col-sm-2 control-label"></label> <div class="col-sm-10">
<div class="alert alert-danger"></div>
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success"> 验证</button>
</div>
</div>
</form>
注意事项:
- 由于验证使用的是 angular的form验证,所以必须要保证form和验证的元素都要有name属性;
- w5cValidatorProvider.setRules方法设置的rules名称是和表单验证元素的name相对应的;
- 如果你不想把验证成功事件w5c-submit写在 form上,可以直接在form里面的其他元素上使用w5cFormSubmit指令,如:
<button type="buttom" w5c-form-submit="vm.saveEntity()" class="btn btn-success"> 验证</button>
- 如果你clone了代码。本地直接打开example/index.html是不可以运行,因为我使用了 $http服务去获取 js css html,所以必须要在本地搭建服务端程序,如果你有nodejs环境,运行
npm install
安装module后再运行grunt server
,如果没有grunt,用命令npm install grunt-cli -g
安装, mac下需要sudo npm install grunt-cli -g
参数
名称 | 默认值 | 作用 |
---|---|---|
blurTrig | false | 光标移除元素后是否验证并显示错误提示信息 |
showError | true | 可以是bool和function,每个元素验证不通过后调用该方法显示错误信息,默认true,显示错误信息在元素的后面。 |
removeError | true | 可以是bool和function,每个元素验证通过后调用该方法移除错误信息,默认true,验证通过后在元素的后面移除错误信息。 |
Worktile,新一代简单好用、体验极致的团队协同、项目管理工具,让你和你的团队随时随地一起工作。完全免费,现在就去了解一下吧。
https://worktile.com
随笔分类 - angular.js
公告
目前工作:Worktile 系统架构师.
兴趣爱好:唱歌/跳舞/书法/玩
职业目标:成为一名优秀的系统架构师.
技术方向:企业级应用架构、领域驱动(DDD)、TDD. 熟悉了解NodeJs, AngularJs, Bootstrap, .NET, MVC, WCF, WinForm, Linq, NUnit, EF, Js, MongoDb SqlServer,Oracle等技术
搜索
我的标签
- angular.js 监控属性(1)
- angular.js 验证(1)
- AngularJS 表单验证(1)
随笔分类(4)
文章分类(10)
最新评论
- 1. Re:[angular.js 使用技巧] - 基于验证框架的扩展(w5cValidator)
- @如同神一般的军爷
ie8 还是要支持的,兼容性后期会加强 ,ie7 ie6就算了吧 - --why520crazy
- 2. Re:[angular.js 使用技巧] - 基于验证框架的扩展(w5cValidator)
- @why520crazy
是什么让你们有勇气放弃IE7,8 这些用户量还很大的群体啊 - --如同神一般的军爷
- 3. Re:[angular.js 使用技巧] - 基于验证框架的扩展(w5cValidator)
- @IBM5150
互相交流,呵呵【AngularJS】 2.0 版本发布的更多相关文章
- Spring.Net.FrameworkV3.0 版本发布了,感谢大家的支持
Spring.Net.FrameworkV3.0 版本发布了,感谢大家的支持. Spring.Net.Framework,基于.NET的快速信息化系统开发.整合框架,为企业或个人在.NET环境下快速开 ...
- 意料之外,情理之中,Spring.NET 3.0 版本发布-
意料之外,情理之中,Spring.NET 3.0 版本发布- 备受社区和企业开发者广泛关注的Spring.NET在上周发布了3.0版本,并且目前已经保持着持续的更新,让我们一起来看一看他究竟发布了哪些 ...
- Kafka 1.0版本发布
Kafka 1.0版本发布 1.0.0 2017年11月1日发布 源码下载: kafka-1.0.0-src.tgz(asc,sha512) 二进制下载: Scala 2.11 - kafka_2.1 ...
- go-wingui 2018 全新 v2.0 版本发布,包含重大更新!
go-wingui 2018 全新 v2.0 版本发布,包含重大更新!使用新版CEF内核Chromium 63.0.3239.109,页面可以使用最新的css3,html5技术.使用delphi7重写 ...
- JEECG 4.0 版本发布,JAVA快速开发平台
JEECG 4.0 版本发布,系统全面优化升级,更快,更稳定! 导读 ⊙平台性能优化,系统更稳定,速度闪电般提升 ...
- CAP 5.0 版本发布通告
前言 今天,我们很高兴宣布 CAP 发布 5.0 版本正式版.同时我们也很高兴的告诉你 CAP 已经有越来越多的用户并且变得越来越流行. 在 5.0 版本中,我们主要致力于更好的支持 .NET 5 以 ...
- 支持边云协同终身学习特性,KubeEdge子项目Sedna 0.3.0版本发布!
摘要:随着边缘设备数量指数级增长以及设备性能的提升,边云协同机器学习应运而生,以期打通机器学习的最后一公里. 本文分享自华为云社区<支持边云协同终身学习特性,KubeEdge子项目Sedna 0 ...
- w5cValidator【AngularJS】 2.0 版本发布
w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些错误提示的功能,让大家不用在每个表单上写一些提示信息的模板,专心的去实现业务逻辑. 代码地址:https://g ...
- 纪念BLives 1.0版本发布
历时两个多月的时间,BLives程序1.0发布,在开发程序期间自己经历了很多,考试,恋爱,学业,自己很纠结 很伤心,有时候很无助,为了让自己有事干,我在考试备考期间去设计程序- -#,虽然程序设计的一 ...
随机推荐
- JAXB 操作XML 与 Object
Java Architecture for XML Binding) 是一个业界的标准,是一项能够依据XML Schema产生Java类的技术.是一种xml与object映射绑定技术标准. JDK5下 ...
- asp.net学习之GridView事件、GridViewRow对象
原文:asp.net学习之GridView事件.GridViewRow对象 1. GridView控件的事件 GridView有很多事件,事件可以定制控件的外观或者行为.事件分为三类 1.1 ...
- OCP读书笔记(24) - 题库(ExamD)
327.You have a database with the following tablespaces: SYSTEM, SYSAUX, UNDO, USERS, TEMP.You want t ...
- Nyoj Arbitrage(Floyd or spfa or Bellman-Ford)
描述Arbitrage is the use of discrepancies in currency exchange rates to transform one unit of a curren ...
- STL algorithmi算法s_sorted和is_sorted_until(28)
is_sort原型: ::is_sorted default (1) template <class ForwardIterator> bool is_sorted (ForwardIte ...
- Swift游戏开发实战教程(霸内部信息大学)
Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料. 本教程具体解说记忆配对 ...
- crm操作安全角色
using System; using Microsoft.Xrm.Sdk; using Microsoft.Crm.Sdk.Messages; using System.Co ...
- ArcEngine载入中SDE问题栅格数据
当直接加载矢量数据到IFeatureWorkspace接口可,但是,在装载门格当要传送的数据IRasterWorkspaceEx接口. 效果如下面的,对可以被添加到双击Globe在. watermar ...
- 浏览器扩展系列————在WPF中定制WebBrowser快捷菜单
原文:浏览器扩展系列----在WPF中定制WebBrowser快捷菜单 关于如何定制菜单可以参考codeproject上的这篇文章:http://www.codeproject.com/KB/book ...
- ASP.NET学习笔记--自己写的Login.aspx
以前有大学有学过,但是没学好,现在准备完全自己动手做一个网站,学习一下ASP.NET 做一个登录页面,首先要有创建一个新的网站,添加Login.aspx,然后做出自己想要的DIV和CSS布局, 之后创 ...
- Spring.Net.FrameworkV3.0 版本发布了,感谢大家的支持