ngVerify v1.5.0

a easy Angular Form Validation plugin.

简洁高效的__angular表单验证插件__

See how powerful it.

看看它有多强大

• 动态校验

• 自动关联提交按钮

• 多种 tip 校验消息提示

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

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

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

• 提供自定义规则

• 支持第三方组件校验

 

Show

 

 

Getting Started

npm install ng-verify

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

 

How to use

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

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

3. 绑定提交按钮 control

 

verify-scope

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

    
         ...
    

tipStyle

defualt: 1 

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

• 0 禁用tip提示

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

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

    
     ...
    

 

ng-verify

元素指令，定义验证规则

defualt

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

required

defualt: true 

false允许空值通过校验

length

min,max 

定制校验字符长度

pattern

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

errmsg

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

option

defualt: 0 

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

    请选择 1 2 3 

least

defualt: 1 

checkbox最少勾选数，指定至少勾选几项才会通过验证

    
    
     checkbox 
      
      
      
      Captain America 
      Iron Man 
      Hulk 
    

recheck

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

control

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

    
      ... 
      
      
      
      
    
 提交 
    

disabled

defualt: true 

设置 disabled:false 提交按钮在表单未校验通过时不会禁用，并且会自动绑定一个click事件，点击时标记所有错误表单。 

注意：a 标签是没有 disabled 属性的，所以请使用 button 或者 input 来做按钮。

    
     按钮
    

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

•