文档章节

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

寻觅一只耳朵
 寻觅一只耳朵
发布于 2013/01/24 21:07
字数 850
阅读 400
收藏 0


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    引入框架










 
 





           

   

   

<script src='js/jquery.js'>
    </script>


   

<script src='../jquery.vtor.js'>
    </script>


   

   

 









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[,参数]){[方法体]}





© 著作权归作者所有

寻觅一只耳朵

寻觅一只耳朵

粉丝 34
博文 29
码字总数 29193
作品 6
海淀
架构师
私信 提问
VVC思想页面解耦合JS验证框架--vtor

vtor 是一个全新的解耦合页面验证js框架。根据全新的VVC思想(validator-view-controler). 基于配置,使验证与页面分离,更加方便、高效。 Vtor 验证库包含了25种以上的常用验证,email,url,p...

寻觅一只耳朵
2013/01/24
847
1
PHP 客服工单系统 - PESMCS Ticket

PESCMS Ticket PESMCS Ticket(下称PT)是一款基于GPLv2协议发布的开源客服工单系统。PT以全新的设计理念,实现一句JS即可嵌入任意页面中,让工单系统变得更加轻便。 运行环境 PHP 5.6及以上版...

金拱门
2018/06/28
11.3K
8
Django 1.2新特性重点导读

欢迎来到Django 1.2! 经过将近一年的开发,Django 1.2 加入了让人振奋的新特征和修正了大量的Bug,以下文档将有助你了解Django 1.2和从老版本升级到Django 1.2注意事项。 概述: Django 1.2...

renwofei423
2010/06/18
907
1
JS杂谈系列-js的认识和js相关技术的了解

其实这篇博客应该是在讲js之前写的,现在算是补上的内容吧,我写的都是自己了解的,可不是凭空捏造,当然很多会记不清,错了及时提出啊!我写的时候也是写有用的,不会写一点子扯淡的玩意,像...

透笔度
2015/08/16
187
0
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
3.3K
5

没有更多内容

加载失败,请刷新页面

加载更多

Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
37分钟前
5
0
Spring Security 实战干货:必须掌握的一些内置 Filter

1. 前言 上一文我们使用 Spring Security 实现了各种登录聚合的场面。其中我们是通过在 UsernamePasswordAuthenticationFilter 之前一个自定义的过滤器实现的。我怎么知道自定义过滤器要加在...

码农小胖哥
40分钟前
7
0
常见分布式事务解决方案

1 微服务的发展 微服务倡导将复杂的单体应用拆分为若干个功能简单、松耦合的服务,这样可以降低开发难度、增强扩展性、便于敏捷开发。当前被越来越多的开发者推崇,很多互联网行业巨头、开源...

asdf08442a
41分钟前
3
0
influxdb continuous queries(cq)从入门到放弃

从前一篇influxdb的文章prometheus基于influxdb的监控数据持久化存储方案完成之后,就一直在折腾influxdb发布测试和生产环境的问题,经过接近2个月的验证,最终发现使用influxdb自带cq的方案...

狗陈
52分钟前
7
0
7.线程通信

在现实生活中,如果一个人团队正在共同完成任务,那么他们之间应该有通信,以便正确完成任务。 同样的比喻也适用于线程。 在编程中,要减少处理器的理想时间,我们创建了多个线程,并为每个线...

Eappo_Geng
58分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部