ngVerify v1.5.0

a easy Angular Form Validation plugin.
简洁高效的__angular表单验证插件__

See how powerful it.
看看它有多强大

  • 动态校验

  • 自动关联提交按钮

  • 多种 tip 校验消息提示

  • 不只校验 dom 元素值,还可以校验 ngModel 数据模型

  • 支持任意类型表单元素,甚至可以校验非表单元素

  • 提供 type 类型校验模板,你几乎不需要定校验规则

  • 提供自定义规则

  • 支持第三方组件校验

Show

HOME - 首页 
DEMO - 示例

Getting Started

npm install ng-verify

require('angular');//在使用前,你需要引入angular require('ngVerify');//引入verify组件 var app = angular.module('APP',['ngVerify']);//注册组件

How to use

  1. 标记一个表单范围 verify-scope

  2. 标记需要验证的元素 ng-verify

  3. 绑定提交按钮 control

verify-scope

入口指令,规定组件所控制的表单范围

<form verify-scope>
...
</form>

tipStyle

defualt: 1 
设置整个表单的错误消息样式

  • 0 禁用tip提示

  • 1 气泡浮动提示,在元素右上角浮出

  • 2 气泡固定高度,紧接着元素另起一行

<form verify-scope="tipStyle: 2" >...</form>

ng-verify

元素指令,定义验证规则

defualt

只需要使用ng-verify,会根据type类型校验非空验证和类型的格式

<!-- 校验非空验证和邮箱格式 -->
<input type="email" ng-verify >

required

defualt: true 
false允许空值通过校验

<input type="number" ng-verify="required: false" >

length

min,max 
定制校验字符长度

<input type="text" ng-verify="{min:3,max:6}" >

pattern

自定义正则,这样会优先以你的正则进行校验

<input type="text" ng-verify="pattern:/a-zA-Z/" >

errmsg

自定义错误消息,会覆盖掉默认的提示。

<input type="text" ng-verify="{errmsg:'其实这里没有错,我是在逗你玩'}" >

option

defualt: 0 
select下拉菜单属性,指定的option表示选中会校验不通过

<select ng-verify="option:0" >
<option>请选择</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

least

defualt: 1 
checkbox最少勾选数,指定至少勾选几项才会通过验证

<div>
<label >checkbox</label>
<!-- checkbox多选,请确保所有checkbox被一个容器包起 -->
<!-- 如果要用label修饰checkbox请统一所有都用 -->
<!-- 确保每组checkbox的name属性相同,ng-verify指令只需要在任意一个checkbox上 -->
<input type="checkbox" name="checkbox" > Captain America
<input type="checkbox" name="checkbox" > Iron Man
<input type="checkbox" name="checkbox" ng-verify="least:2"> Hulk
</div>

recheck

指定一个元素进行2次校验,接收参数为 #id 或 name

<input type="password" name="password-1" ng-verify>

<!-- 检测第二次输入的密码是否一致 -->
<input type="password" ng-verify="{recheck:'password-1'}">

control

绑定一个表单提交按钮, control:'formName'

<form name="myform" verify>
... <a ng-verify="{control:'myform'}" ></a> <!-- 表单内的按钮 1 --> <input type="submit" ng-verify /> <!-- 表单内的按钮 2 -->
</form> <button ng-verify="{control:'myform'}" >提交</button> <!--表单外的按钮-->

disabled

defualt: true 
设置 disabled:false 提交按钮在表单未校验通过时不会禁用,并且会自动绑定一个click事件,点击时标记所有错误表单。 
注意:a 标签是没有 disabled 属性的,所以请使用 button 或者 input 来做按钮。

<button ng-verify="disabled:false" >按钮</button>

tipStyle

defualt: form verify-scope 
同上,设置单个元素提示样式

API

依赖注入

//依赖注入ngVerify后,可以调用一些公共方法
app.controller('yourCtrl',function(ngVerify){
...
})

check

ngVerify.check('formName', call_back, draw) 
检测一个verify表单是否验证通过,并刷新一次提交按钮的状态

'formName'             String      //指定检测form的name值 (必须)
call_back Function //检测完成后的回调 (可选)
draw (default:true) Boolean //是否标记出未验证通过的元素 (可选)
//返回所有未验证通过的表单元素,并标记
ngVerify.check('formName',function (errEls) {
console.log(errEls);
}); //标记出未验证通过元素
ngVerify.check('formName'); //返回所有未验证通过的表单元素,不标记
ngVerify.check('formName',function (errEls) {
console.log(errEls);
},false);

checkElement

ngVerify.checkElement(elemet, draw) 
检测一个元素是否验证通过

element                id/name/DomObj  //参数 id 或 name 或一个原生 dom 对象
draw (default:true) Boolean //是否标记出未验证通过的元素 (可选)

setError

ngVerify.setError(element, errmsg) 
将一个表单元素强制标记为未验证通过,第二参数不传时取消标记。

  • element 需要标记的元素,可传入dom、id或者name,id需要带#

  • errmsg tip提示错误时显示的消息,其优先级高于其他错误消息

ngVerify.setError('#id','这里有错') //以id标记错误
ngVerify.setError('name') //以name取消标记错误

scope

ngVerify.scope() 
获取一个verify表单的$scope作用域

ngVerify.scope('formName')

type

设置表单元素type类型,目前支持的type类型:

  • email

  • number

  • phone

  • url

  • radio

  • checkbox

  • select

  • char (字母加下划线)

  • date/dates (yyyy-mm-dd || yyyy-mm ) (hh:mm || hh:mm:ss) 时间部分非必须

  • file

tips

  • 传入的参数字符串都必须是对象参数"{key1: value1, key2: value2}",可以不写大括号 { }

  • checkbox、radio组绑定验证最好绑在最后一个

  • errmsg参数通常不需要你设置

  • 表单范围内的按钮,只要type="submit"则不需要设置control参数

  • 带有 ngModel 的元素,其数据模型具有较高的校验优先级

  • 不支持form嵌套

Support

  • IE 9+

  • angular 1.x

ngVerify - 更高效的 angular 表单验证的更多相关文章

  1. Angular 表单验证类库 ngx-validator 1.0 正式发布

    背景介绍 之前写了一篇 <如何优雅的使用 Angular 表单验证>,结尾处介绍了统一验证反馈的类库  ngx-validator  ,由于这段时间一直在新模块做微前端以及相关业务组件库, ...

  2. 如何优雅的使用 Angular 表单验证

    随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...

  3. Angular表单验证

    novalidate   去掉html5自带的验证 ng-minlength    规定输入文本的最小长度 ng-maxlength    规定输入文本的最大长度 ng-submit  接收一个方法名 ...

  4. 简单的angular表单验证指令

    <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title& ...

  5. angular表单验证实例----可用的代码

    前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ...

  6. 从浅入深剖析angular表单验证

    最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. 入门之前,我觉得应该先了 ...

  7. angular 表单验证

    最近在用angular写表单验证时 , 不小心把ng-model全替换删掉了, 然后发现之前写的验证都失效, 在查阅资料和反复修改摸索后, 发现angular中的表单验证, 都是基于ng-model的 ...

  8. 简话Angular 05 Angular表单验证

    一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 <div ng-controller="ExampleController ...

  9. Angular 表单验证 基础篇

    <div class="nav"> <h4>表单验证</h4> <form ng-app="myApp" name=& ...

随机推荐

  1. about how to determine a prime number

    (1) if divided by 2 or 3, then no; (2) we only have to go through prime factors; because a composite ...

  2. Mac配置maven环境命令

    1.安装:解压下载好的maven的文件,解压到你想要的文件夹底下. 2.配置 1)打开终端输入命令 vim ~/.bash_profile (编辑环境变量配置文件) 2)按下i,进入编辑模式 3)在环 ...

  3. Eureka服务治理学习笔记(摘抄)

    1.简介 EureKa在Spring Cloud全家桶中担任着服务的注册与发现的落地实现.Netflix在设计EureKa时遵循着AP原则,它基于R EST的服务,用于定位服务,以实现云端中间层服务发 ...

  4. idea加载完文件报错:java:-source 1.7中不支持lambda表达式 解决方案

    1.file - Project Structure ctrl+alt+shift+s 2.modules 中把7换成8

  5. Hystrix容错处理

    如果服务提供者响应非常缓慢,那么消费者对提供者的请求就会被强制等待,直接提供者响应或超时.在高负载场景下,如果不做任何处理,此类问题可能会导致服务消费者的资源耗竭甚至整个系统的崩溃.这时,就需要进行容 ...

  6. CSS3中2D/3D转换、过渡、动画

    转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 d ...

  7. <数据库>MySQL的安装及安装中存在的问题

    无脑三连: 下载:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压:任意目录 添加环境变量:WIN10步骤 我的电脑→属性→高级系 ...

  8. python-web-selenium模拟控制浏览器

    用 selenium 模块控制浏览器 启动 selenium 控制的浏览器 from selenium import webdriver brower = webdriver.Firefox() br ...

  9. Qt源码下载

    这是官方下载地址:http://qt.nokia.com/downloads 点击右下角的 ftp.qt.nokia.com - Archive You can find our archive of ...

  10. Windows API 第16篇 GetLogicalDrivers 获取驱动器位掩码

    函数原型:DWORD GetLogicalDrives(VOID);The GetLogicalDrives function retrieves a bitmask representing the ...