全新的基于VVC思想的页面验证js框架vtor

2019独角兽企业重金招聘Python工程师标准>>>

Vtor

1. 概述

vtor
是一个全新的解耦合页面验证js框架。根据全新的VVC思想(validator-view-controler). 基于配置，使验证与页面分离，更加方便、高效。

Vtor 验证库包含了25种以上的常用验证，email,url,phone,mobile,ajax等等。

用户可以自定义添加或覆盖已有的验证函数库；

用户可以自定义配置文件组织格式。

githib地址：https://github.com/jsonzou/vtor

QQ交流群：291631859

VVC的工作图：

2. 用法

2.1 引入框架

2.2 给需要做验证的DOM元素添加ID属性

如：demo.html中，对email验证

电子邮箱地址：<input type='text'
id='iemail' value=''/>

2.3配置验证部件

如：在验证文件demo.vtor中,配置对电子邮件进行格式验证且必须是163邮箱的

@demo

#iemail

--email()::邮箱格式不正确

--contain(163.com)::请填入163邮箱地址

验证文件格式说明：

注释方式：

多行注释/* */

@view //页面模块名以@开头；可以有多个

#DOM ID //页面上DOM ID以#开头；可以有多个

--functionName([param])::message //验证函数类型，参数，提示

验证语--开头；

::后表示验证错误提示信息；无参数时()可省略不写；

可以复合验证；既一个DOM可以有多个验证语句；

可以有多个。*/

单行注释 ://

2.4执行验证

<script>

$(function(){

//初始化；参数1：验证文件路径；参数2：页面模块名

$vtor.$('demo.vtor',[‘demo’]);

$("#submitButton").click(function(){

var
r=$vtor.$v();//执行验证

if(r){

$( ‘form’).submit()

}

});

})

</script>

2.5验证结果

邮箱格式不正确：

不是163邮箱：

全正确：

3. 用户自定义配置

3.1概述

用户可以通过在vconf/vtor.config.js文件中自定义修改验证文件组织格式、扩充或覆盖验证函数库。

3.2自定义验证文件组织格式

自定义验证文件的代码：

config.vtor={

msg_type:'single'

};

相关参数配置项如下表：

参数名	参数说明	默认
func_pre	验证函数前缀	func
view_pre	页面模块前缀	@
id_pre	DOM ID前缀	#
validateTerm_pre	验证语句前缀	--
msg_pre	验证提示信息前缀	::
param_begin	验证函数参数开始字符	(
param_end	验证函数参数结束字符	)
param_split	验证函数参数分隔字符	,
msg_type	验证结果信息提示类型:single只提示最靠前的一个错误信息；multiple提示全部错误信息	single
msg_class	提示框的样式	vtor-input-err-msg
errInput_class	输入框错误的样式	vtor-input-err-border
vtor_suf	验证文件扩展名配置	vtor

*以上参数均区分大小写

3.3自定义扩充或覆盖验证函数库

用户自定义函数的代码：

config.funcs={

//只能输入数字（无参数）

func_numeric:function(id){

var val=$vtor.$id(id);//获取dom id的输入值

return /^\d+$/.test(val);},

//只能输入限定位数的数字（有参数）

func_numericLimit:function(id,param){

var val=$vtor.$id(id);//获取dom id的输入值

if(val.length!=param[0]){return false;}

return /^\d+$/.test(val);

}

定义好以上两个函数，用户就可以在vtor配置文件中配置使用了

例：

@demo

#inum

-- numeric()::请输入数字//无参也可以：-- numeric::请输入数字

-- numericLimit(4)::请输入4位数字

函数格式=
<func_pre><_><functionName>:function(<id>[,param]){[functionBody]};

既：

函数格式=验证函数前缀[默认func]+下划线+函数功能名称:function(DOM ID[,参数]){[方法体]}

转载于:https://my.oschina.net/jsonavaj/blog/104577

全新的基于VVC思想的页面验证js框架vtor相关推荐

基于 Koa 的微服务 Node.js 框架设计思路与简单实现
大家好,我是前端点线面,毕业于华中科技大学,非科班出身的一枚新时代农民工,现在是百度前端研发工程师,著有<前端百题斩>.数十篇学习思维导图(go.React.Redux.Vue.Vuex. ...
功能暴强的页面验证js代码
<html> <head> <title></title> <script language="javascript" typ ...
2013页面验证框架来袭。基于独创的vvc思想。还不知道的童鞋赶快围观吧！
2019独角兽企业重金招聘Python工程师标准>>> vtor 是一个全新的解耦合页面验证js框架.根据全新的VVC思想(validator-view-controler). 基于 ...
Python攻城师的成长————Django框架（csrf相关装饰器、基于中间件思想编写项目、auth认证模块）
今日学习目标逐步掌握csrf相关装饰器.基于中间件思想编写项目.auth认证模块知识点文章目录今日学习目标学习内容一. csrf相关装饰器二.基于中间件思想编写项目三.auth认证模块 ...
ASP.NET MVC基于标注特性的Model验证：DataAnnotationsModelValidator
对于ASP.NET MVC基于标注特性的Model验证,很多人只知道应用在数据类型及其属性上用于定义验证规则和错误消息的ValidationAttribute.通过<ASP.NET MVC以Mo ...
ASP.NET 完成基于表单的身份验证
实现:验证用户身份成功,并登陆后台Admin文件夹里的index.aspx后台管理首页面,否则禁止匿名用户访问项目中的Admin文件夹里的任何一个文件. 步骤一: 在根目录下的web.config ...
傻瓜教程：asp.net(c#) 如何配置authentication,完成基于表单的身份验证
傻瓜老师又来了,本讲座报以学以致用,师傅带进门修行靠个人的精神,不深入探讨,还请多指教~ 这堂课将的是基于表单的身份验证,其实某些时候,用于验证身份的账户和密码并不需要存在数据库或配置文件里,这时 ...
jQuery用面向对象的思想来编写验证表单的插件
本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...
ACL 2018论文解读 | 基于排序思想的弱监督关系抽取选种与降噪算法
在碎片化阅读充斥眼球的时代,越来越少的人会去关注每篇论文背后的探索和思考. 在这个栏目里,你会快速 get 每篇精选论文的亮点和痛点,时刻紧跟 AI 前沿成果. 点击本文底部的「阅读原文」即刻加入社区 ...

全新的基于VVC思想的页面验证js框架vtor

全新的基于VVC思想的页面验证js框架vtor相关推荐

最新文章

热门文章