ngVerify - 更高效的 AngularJS 表单考证

2024年5月16日 222次阅读 来源: moer

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

  • 不再限定长度输入，只触发校验
    原文作者：moer
    原文地址: https://segmentfault.com/a/1190000006612247
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞