【AngularJS】 2.0 版本发布

w5cValidator【AngularJS】 2.0 版本发布

 

w5cValidator 插件基于angular原有的表单验证，在原有的基础上扩展了一些错误提示的功能，让大家不用在每个表单上写一些提示信息的模板，专心的去实现业务逻辑。

代码地址：https://github.com/why520crazy/w5c-validator-angular

关于v1.x版本的介绍参见：http://www.ngnice.com/posts/69f774dc4d3190

v1.0版本虽然简单的实现了想要的功能，但是没有按照模块独立出来，而且有很多代码不是很规范，这次正好抽时间重构了代码，直接升级到了 v2.0.0版本，同时也完善了一些展示案例功能。

如果你已经足够了解了angular或者之前使用过 w5cValidator，可以直接看展示程序：

展示地址：http://why520crazy.github.io/w5c-validator-angular

使用步骤：

  1. HTML 中引用 dest/w5cValidator.js；
  2. 启动module引用 "w5c.validator"，如: 
    var app = angular.module("app", ["w5c.validator"]);

  3. 在app.config事件中配置全局属性和显示规则：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    app.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: "数字不能为空"
             }
         });
     }]);

    　　

  4. 在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>

注意事项：

  1. 由于验证使用的是 angular的form验证，所以必须要保证form和验证的元素都要有name属性；
  2. w5cValidatorProvider.setRules方法设置的rules名称是和表单验证元素的name相对应的；
  3. 如果你不想把验证成功事件w5c-submit写在 form上，可以直接在form里面的其他元素上使用w5cFormSubmit指令，如： 
    <button type="buttom" w5c-form-submit="vm.saveEntity()" class="btn btn-success"> 验证</button>
  4. 如果你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，验证通过后在元素的后面移除错误信息。
支持why520crazy的创业产品Worktile
Worktile，新一代简单好用、体验极致的团队协同、项目管理工具，让你和你的团队随时随地一起工作。完全免费，现在就去了解一下吧。
https://worktile.com

随笔分类 - angular.js

 
摘要: w5cValidator 插件基于angular原有的表单验证，在原有的基础上扩展了一些错误提示的功能，让大家不用在每个表单上写一些提示信息的模板，专心的去实现业务逻辑。代码地址：https://github.com/why520crazy/w5c-validator-angular关于v1.x版本...阅读全文
posted @ 2014-07-15 12:58 why520crazy 阅读(256) | 评论 (0) 编辑
 
摘要: angular.js没有计算列属性（监控属性）之说，本文通过一个简单的示例来展示angular.js 是怎样实现监控属性的效果，同时也给出了其他几个框架的代码示例，希望借此能够发散读者的思维方式。阅读全文
posted @ 2013-11-06 22:13 why520crazy 阅读(542) | 评论 (0) 编辑
 
摘要: 开场白：angular.js是谷歌出的前端js MV*框架，我也是今年做worktile的时候才开始接触的，起初技术选型的时候还准备使用 backbone（毕竟很多大公司在使用他，而且也是比较早的提出前端MVC的框架），但是经过我们研究后发现，backbone写个东西太费劲了，在这里我就不细说了，至于前端MVC框架的比较，有很多文章介绍过，至于我们为什么选择angular.js，道理很简单，我们发现他的时候觉得他太棒了，有强大的模板语言，数据双向绑定，路由等等的特性，而且入门很简单（我个人是这么认为的，我一直是一个后端工程师），也许这和angular的作者是java工程师有点关系吧，虽说入门简阅读全文
posted @ 2013-11-02 22:45 why520crazy 阅读(1167) | 评论 (6) 编辑

公告

 

目前工作：Worktile 系统架构师.
兴趣爱好：唱歌/跳舞/书法/玩
职业目标：成为一名优秀的系统架构师.

技术方向：企业级应用架构、领域驱动(DDD)、TDD. 熟悉了解NodeJs, AngularJs, Bootstrap, .NET, MVC, WCF, WinForm, Linq, NUnit, EF, Js, MongoDb SqlServer,Oracle等技术

昵称：why520crazy
园龄：5年3个月
粉丝：12
关注：2

< 2014年7月 >
日 一 二 三 四 五 六
29 30 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 1 2
3 4 5 6 7 8 9

搜索

 
 

随笔分类(4)

最新评论

热门专题

openapi平台设计
Android WebView调试工具
np.array与np.mat
kisso 前后端分离
idea new window 默认配置
advanced installer 注册dll
java 每月第一天
IDEA如何生成顺序图
ueditor 禁止加<p>
jmeter命令行压测的概要日志详解
skywalking集群部署
SPRING BOOT脚手架项目
python pyqtgraph保存到doc
jq 点击 DIV 以外的内容关闭
php 三元运算 区间
红帽多路径I O路径切换
spl和db怎么换算
css渐变 转 canvas渐变
byte数组存到json中
perl中常见的4种控制流