AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】


Posted in Javascript onNovember 03, 2016

本文实例讲述了AngularJS验证信息框架的封装插件用法。分享给大家供大家参考,具体如下:

AngularJS 的表单验证规则

angular.js 的表单验证规则有 required(必填项),type="number"(必须为数字),type="email"(必须为邮箱地址),ng-max(最大值),ng-min(最小值),ng-max-length(最大长度),ng-min-length(最小长度),ng-pattern(正则验证)等等,而且angular写自定的验证规则也很简单。

具体的验证细节参考官方文档:http://docs.angularjs.org/guide/forms

AngularJS 默认的验证是实时的,如果输入框输入值验证通过会在input上加入class ng-valid,如果验证不通过会自动添加 class ng-invalid,输入框输入了值之后自动加上了 class ng-dirty,这样系统可以很简单的通过修改 ng-invalid ng-valid ng-dirty 三个样式达到验证提示的目的。但是如果验证失败需要提示一段文字,那么只有通过编写模板来达到。

Angular.js 验证的缺点

1. 提示信息是实时显示的,有时候我们更想要通过表单提交触发验证

2. 写验证提示信息需要写大量模板:

<div>
    Size (integer 0 - 10):
    <input type="number" ng-model="size" name="size"
       min="0" max="10" integer />{{size}}<br />
    <span ng-show="form.size.$error.integer">This is not valid integer!</span>
    <span ng-show="form.size.$error.min || form.size.$error.max">
     The value must be in range 0 to 10!</span>
</div>

w5cValidator 扩展插件的出现

Github上的源码地址为:https://github.com/why520crazy/w5c-validator-angular

目前版本v1.0.0

使用步骤:

1. 在项目中引用 w5cValidator.js

2. 在表单form上添加一个指令 w5c-form-validate 和 w5c-submit 如下所示:

<form class="form-horizontal cw-form demo-form" role="form" w5c-submit="js_save_entity(form_validate)"
         w5c-form-validate="" novalidate name="form_validate">
<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="user_name" placeholder="输入用户名">
  </div>
</div>

...
</form>

w5c-submit 函数是表单验证成功后执行的事件,验证失败不会执行

3. 没了,使用就这么简单

w5cValidator 使用注意事项:

1. w5cValidator 默认的错误提示使用了bootstrap的样式和布局,使用到你的项目中需要修改默认的 show_error, remove_error 方法,可以是tip提示,可以是统一在某个地方显示等等

2. w5cValidator 可以设置光标移走input时是否显示错误提示,默认false

3. w5cValidator 自带了默认的提示信息,同时支持自定义验证规则提示信息

4. angular.js的所有验证信息都是保存在form表单中的,w5cValidator也是监控表单元素的属性来实现的,使用必须要设置form以及每个元素的name属性,否则错误信息就找不到对应的元素

5. 看下以下的代码你就能明白一切了:

w5cValidator.init({
     //blur_trig  : false,
     //show_error : function (elem, error_messages) {
     //
     //},
     //remove_error: function (elem) {
     //
     //}
});
w5cValidator.set_rules({
    user_name: {
       required: "输入的用户名不能为空",
       pattern : "用户名必须输入字母、数字、下划线,以字母开头"
    }
});

当然目前的 w5cValidator 还比较原始,NgNice的验证提示就是使用了w5cValidator

未来规划中的 w5cValidator 2.0

1. 现在只能设置全局的显示类型,将来要支持单个表单的配置项,整个项目偶尔会有提示信息不同的情况

2. 代码重构,以AngularJS的方式编写扩展

3. 添加一些 AngularJS没有的验证类型 如 repeat ,uniquecheck 等

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
JavaScript简单生成 N~M 之间随机数的方法
Jan 13 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
再谈Angular4 脏值检测(性能优化)
Apr 23 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
vue quill editor 使用富文本添加上传音频功能
Jan 14 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
基于vuejs+webpack的日期选择插件
May 21 #Javascript
Vue.js创建Calendar日历效果
Nov 03 #Javascript
AngularJS中transclude用法详解
Nov 03 #Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 #Javascript
AngularJS控制器之间的通信方式详解
Nov 03 #Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
收集的几个Python小技巧分享
2014/11/22 Python
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python callable内置函数原理解析
2020/03/05 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Python基于template实现字符串替换
2020/11/27 Python
关于python中remove的一些坑小结
2021/01/04 Python
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
opencv实现图像几何变换
2021/03/24 Python
4S店售后客服自我评价
2014/04/09 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL