ngVerify - 更高效的 AngularJS 表单验证

shiina 发布于2019-08-20 10:20 / 3481人阅读

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

标记一个表单范围 verify-scope

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

绑定提交按钮 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表示选中会校验不通过

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类型：

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

不再限制长度输入，只触发校验

云服务器 GPU云服务器 Java代码更高效提示，html5的表单验证 angularjs的cdn ngVerify

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80094.html

angularjs初识

摘要：总的来说，收获很大。这里这里就以一些常用的标签谈谈中的基础知识。然后还有一个表示记录的索引号，从开始。已经用这个数组的值替他们分好了组了，是不是感觉很强大，还有很多强大的地方等着我们去学习，掌握它，还有更强大的等着我们。周三的时候跟着老师简单的入门了angularjs，然后去图书馆找了一本《Angularjs实战》来看了看，虽然这本书网上的评价不太高，但对于初学者的我来说还是不错的，...

tanglijun 2019-08-23 11:49 评论0 收藏0
AngularJs功能（八）--表单验证

摘要：表单验证表单验证是一项重要的功能，能保证我们的应用不会被恶意或错误的输入破坏。给加上意味着表单的名称是。验证提示这是在版本之后对表单验证的优化。表单验证表单验证是angularJS一项重要的功能，能保证我们的web应用不会被恶意或错误的输入破坏。Angular表单验证提供了很多表单验证指令，并且能将html5表单验证功能同他自己的验证指令结合起来使用，进而在客户端验证时提供表单状态...

zhaochunqi 2019-08-22 14:00 评论0 收藏0
angular表单验证

摘要：如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加标记。如果未修改，值为，如果修改过值为修改过的表单只要用户修改过表单，无论输入是否通过验证，该值都返回合法的表单这个布尔型的属性用来判断表单的内容是否合法。借助AngularJS，我们不需要花太多额外的精力就可以轻松实现客户端表单验证功能。虽然 Web应用安全不能完全依赖客户端验证，但客户端验证可以提供表单状态的实时反馈。 ...

Cristalven 2019-08-21 11:45 评论0 收藏0