ngVerify - 更高效的 angular 表單驗證
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
-
標記一個表單範圍 verify-scope
-
標記需要驗證的元素 ng-verify
-
綁定提交按鈕 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 表單驗證