a easy AngularJS Form Validation plugin.
簡潔高效的__表單驗(yàn)證插件__

See how powerful it.
看看它有多強(qiáng)大

動(dòng)態(tài)校驗(yàn)

自動(dòng)關(guān)聯(lián)提交按鈕

多種 tip 校驗(yàn)消息提示

不只校驗(yàn) dom 元素值，還可以校驗(yàn) ngModel 數(shù)據(jù)模型

支持任意類型表單元素，甚至可以校驗(yàn)非表單元素

提供 type 類型校驗(yàn)?zāi)０澹銕缀醪恍枰ㄐｒ?yàn)規(guī)則

提供自定義規(guī)則

支持第三方組件校驗(yàn)

IE 9+

angularjs 1.5+

HOME - 首頁
DEMO - 示例

npm install ng-verify

require("angular");//在使用前，你需要引入angular

require("ngVerify");//引入verify組件

var app = angular.module("APP",["ngVerify"]);//注冊組件

標(biāo)記一個(gè)表單范圍 verify-scope

標(biāo)記需要驗(yàn)證的元素 ng-verify

綁定提交按鈕 control

入口指令，規(guī)定組件所控制的表單范圍

    ...

defualt: 1
設(shè)置整個(gè)表單的錯(cuò)誤消息樣式

0 禁用tip提示

1 氣泡浮動(dòng)提示，在元素右上角浮出

2 氣泡固定高度，緊接著元素另起一行

...

元素指令，定義驗(yàn)證規(guī)則

只需要使用ng-verify，會根據(jù)type類型校驗(yàn)非空驗(yàn)證和類型的格式

defualt: true
false允許空值通過校驗(yàn)

min,max
定制校驗(yàn)字符長度

自定義正則，這樣會優(yōu)先以你的正則進(jìn)行校驗(yàn)

自定義錯(cuò)誤消息，會覆蓋掉默認(rèn)的提示。

defualt: 0
select下拉菜單屬性，指定的option表示選中會校驗(yàn)不通過

    請選擇
        1
        2
        3

defualt: 1
checkbox最少勾選數(shù)，指定至少勾選幾項(xiàng)才會通過驗(yàn)證

    checkbox
    
    
    
     Captain America
     Iron Man
     Hulk

指定一個(gè)元素進(jìn)行2次校驗(yàn)，接收參數(shù)為 #id 或 name

綁定一個(gè)表單提交按鈕, control:"formName"

    ...

     

     


提交 

defualt: true
設(shè)置 disabled:false 提交按鈕在表單未校驗(yàn)通過時(shí)不會禁用，并且會自動(dòng)綁定一個(gè)click事件，點(diǎn)擊時(shí)標(biāo)記所有錯(cuò)誤表單。
注意：a 標(biāo)簽是沒有 disabled 屬性的，所以請使用 button 或者 input 來做按鈕。

    按鈕

defualt: form verify-scope
同上，設(shè)置單個(gè)元素提示樣式

依賴注入

//依賴注入ngVerify后，可以調(diào)用一些公共方法
app.controller("yourCtrl",function(ngVerify){
    ...
})

ngVerify.check("formName", call_back, draw)
檢測一個(gè)verify表單是否驗(yàn)證通過，并刷新一次提交按鈕的狀態(tài)

"formName"             String      //指定檢測form的name值 (必須)
call_back              Function    //檢測完成后的回調(diào) (可選)
draw (default:true)    Boolean     //是否標(biāo)記出未驗(yàn)證通過的元素 (可選)

//返回所有未驗(yàn)證通過的表單元素，并標(biāo)記
ngVerify.check("formName",function (errEls) {
    console.log(errEls);
});

//標(biāo)記出未驗(yàn)證通過元素
ngVerify.check("formName");

//返回所有未驗(yàn)證通過的表單元素，不標(biāo)記
ngVerify.check("formName",function (errEls) {
    console.log(errEls);
},false);

ngVerify.checkElement(elemet, draw)
檢測一個(gè)元素是否驗(yàn)證通過

element                id/name/DomObj  //參數(shù) id 或 name 或一個(gè)原生 dom 對象
draw (default:true)    Boolean     //是否標(biāo)記出未驗(yàn)證通過的元素 (可選)

ngVerify.setError(element, errmsg)
將一個(gè)表單元素強(qiáng)制標(biāo)記為未驗(yàn)證通過，第二參數(shù)不傳時(shí)取消標(biāo)記。

element 需要標(biāo)記的元素，可傳入dom、id或者name,id需要帶#

errmsg tip提示錯(cuò)誤時(shí)顯示的消息，其優(yōu)先級高于其他錯(cuò)誤消息

ngVerify.setError("#id","這里有錯(cuò)") //以id標(biāo)記錯(cuò)誤
ngVerify.setError("name") //以name取消標(biāo)記錯(cuò)誤

ngVerify.scope()
獲取一個(gè)verify表單的$scope作用域

ngVerify.scope("formName")

設(shè)置表單元素type類型，目前支持的type類型：

email

number

phone

url

radio

checkbox

select

char (字母加下劃線)

date/dates (yyyy-mm-dd || yyyy-mm ) (hh:mm || hh:mm:ss) 時(shí)間部分非必須

file

傳入的參數(shù)字符串都必須是對象參數(shù)"{key1: value1, key2: value2}"，可以不寫大括號 { }

checkbox、radio組綁定驗(yàn)證最好綁在最后一個(gè)

errmsg參數(shù)通常不需要你設(shè)置

表單范圍內(nèi)的按鈕，只要type="submit"則不需要設(shè)置control參數(shù)

帶有 ngModel 的元素，其數(shù)據(jù)模型具有較高的校驗(yàn)優(yōu)先級

不支持form嵌套

不再限制長度輸入，只觸發(fā)校驗(yàn)