ngVerify - 更高效的 AngularJS 表單驗證

ngVerify v1.5.6

a easy AngularJS Form Validation plugin.
簡潔高效的__表單驗證插件__

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

• 動態校驗
• 自動關聯提交按鈕
• 多種 tip 校驗消息提示
• 不僅校驗 dom 元素值，還能夠校驗 ngModel 數據模型
• 支持任意類型表單元素，甚至能夠校驗非表單元素
• 提供 type 類型校驗模板，你幾乎不須要定校驗規則
• 提供自定義規則
• 支持第三方組件校驗

Support

• IE 9+
• angularjs 1.5+

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嵌套

Recent update

• 再也不限制長度輸入，只觸發校驗