表单客户端验证框架jsvalidation

JSValidation 一个比较优秀的JavaScript客户端验证框架。

作者: Michael Chen(中国人)

作者博客:http://michael.nona.name/

其中中文文档非常全面,很适合我国的开发人员使用。




---------------------------------------------------------------------------------------------------------------------------


使用JSValidation的例子:


1,下载JSValidation
http://cosoft.org.cn/projects/jsvalidation

由于JSValidation框架的文件编码是gb2312,如果您的项目使用的文件编码为gb2312.此步骤可以省略。如果不为gb2312.

下载完成后,请借助文本编辑器把

validation-framework.js,

validation-config.xml,

validation-config.dtd

文件另存为您项目中使用的文件编码。


注意:个人访问时此网址报404. 如果读者需要下载可以借助搜索引擎。在第三方网站下载到。或给本人留言。定会分享给大家。


2,建立web项目,把validation-framework.js,validation-config.xml,

validation-config.dtd,这3个文件放入你的项目,如WebRoot/js目录下

注意:js此目录可以自定义选择。


3,在您的项目中使用JSValidation框架。

打开validation-framework.js,将大约在第21行的 var ValidationRoot=""; 代码更改为:

var ValidationRoot="/您的项目名称/js"; 此步用来指定validation-config.xml文件的位置。


4,编写validation-config.xml文件

将form的id和要验证域的name设置成一致的,每个验证域可以根据自己的需求改变验证方法
下面是xml的代码

<? xml version="1.0" encoding="utf-8" ?>
<! DOCTYPE validation-config SYSTEM "validation-config.dtd" >
< validation-config  lang ="auto" >
 
< form  id ="form1"  show-error ="alert"  show-type ="all" >
  
< field  name ="username"  display-name ="用户名"  onfail ="" >
   
< depend  name ="required"   />
   
<depend name="minLength" param0="3"/>
     <depend name="maxLength" param0="20" />
  
</ field >

  
< field  name ="password"  display-name ="密码" >
   
< depend  name ="required"   />
   
< depend  name ="commonChar"   />
  
</ field >
 
</ form >
</ validation-config >


5,在需要验证表单的网页前面加上对JSValidation的引用

< script language = " javascript "  src = " js/validation-framework.js " ></ script >

然后是表单的onsubmit事件
οnsubmit="return doValidate(this)"
doValidate()中传this或者表单的id的字符串都可以
表单一定要有id,并与后面的xml文件中的id相同



完成以上5步,OK!测试一下吧。




--------------------------------------------------------------------------------------------------------

JSValidation支持的13种验证 :
name 描述 参数含义 
required 必须,代表这个域不能为空 无参数 
integer: 没有或者必须为整数 无参数 
double: 允许为空或者必须为double数 无参数 
commonChar 普通英文字符:字母数字和下划线 无参数 
chineseChar: 中文字符 无参数 
minLength: 最小长度, param0为最小长度数值 
maxLength: 最大长度, param0为最大长度数值 
email: 必须为Email格式 无参数 
date: 必须为日期格式, param0必须为yyyy-mm-dd,或者三个占位符的任意排列顺序。连接字符任意如dd/mm/yyyy 
mask: 允许自定义正则表达式来进行校验 param0为表达式字符串 
integerRange: 整数范围必须在参数0和参数1之间。 param0和param1必须能被转化成整数 
doubleRange: double数的范围必须在参数0和参数1之间 参数0和参数1必须能被转化成Float。 
equalsField: 必须与某一个域的值相等 param0:同一个表单中域的名称。例如用来校验密码




其他:


- 文件格式 
validation-config.xml是标准文本格式。你可以以任何文本编辑器来编辑它。在正式校验之前,请确保你的xml文件能够正常显示在浏览器中。 
- 基本结构 


<validation-config> 每个validation-config.xml都有一个validation-config根节点 
<form ...> 可以进行一个或者多个form的校验 
<field ...> 每个form有一个或者多个需要验证的表单域 
<depend ... /> 每个域需要验证的条件可以有一个或者多个 


- 节点说明 
validation-config: 根节点 
属性:lang: 所用的语言,可以是"auto", "zh-cn"(简体中文)或者"en-us"(英文)。默认为auto,可选。 
子节点:form, 一个或多个 


form: 虚拟表单,通过id映射网页中的表单 
属性:id: 映射网页表单中的id,通过这个id,使得jsvalidation与实际网页表单相关联。必须 
show-error: 显示错误提示信息的方式。可以是alert(将会显示对话框)或者一个div的id(将会在这 
个div中显示错误消息)必须 
onfail: 当校验失败时,运行的自定义JS函数。可选(该版本尚未实现) 
子节点:field,一个或者多个 


field: 虚拟表单域,通过name映射表单中的实际域 
属性:name: 表单中的域的名称,例如input name="abc",此处则对应abc。 必须 
display-name: 表单的显示名称。当校验失败时,会显示这个属性。必须 
onfaile: 与form中的onfail一样。尚未实现。可选 
子节点:depend,一个或多个 


depend: 校验条件 
属性:name: 校验条件的名称,必须为下面指定的13中名称之一,大小写敏感。必须。 
param0-param4,5个参数,根据name不同,各有不同取值。 



JSValidation是强大灵活的客户端验证框架。在应用服务器或者开发框架不提供验证的情况下,例如,普通的JSP, ASP, PHP等开发,以及一些不提供验证支持的开发框架,如Tapestry, Velocity等,JSValidation提供了一种灵活的解决方案。与其他验证方式相比,它最大的优点在于独立与易于集成。纯JavaScript结构,可以很容易的集成到现有的应用中而不论现有的应用是基于什么语言。将所有的表单验证集中管理,使得维护应用更加容易。简便的XML配置,易于扩充的验证方式(目前支持13种验证,囊括了大部分常用表单验证),使得JSValidation成为验证框架的首选。 <br>1. JSValidation是什么?<br>如首页所说,JSValidation客户端表单验证框架,用在BS系统中,或者简单的网页系统中。表单验证在这些开发中很常见:新用户注册,需要校验某些字段;用户登陆,需要校验;等等。在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来与表单对象交互,并进行校验。常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。根据一般的经验,如果表单中需要校验的域个数超过10个,开发过程就显得枯燥无味——多段重复的代码不断重复,如果要求跨浏览器,更多的考虑因素使人头疼不已。往往这个页面的验证还不能用于那个验证&hellip;&hellip;虽然逻辑基本相同;但是在大多数情况下,出于种种原因,开发者宁愿(或者没办法)重新编写另一个页面的JavaScript代码。<br><br>JSValidation致力于改善这一过程。它将常见的校验(目前支持13种)封装起来,并创造性的采用xml来存贮表单验证信息,使得表单验证成为整个项目中最不重要的环节,开发者只需要定义几个xml标记,就可以创建出复杂的验证策略,而不用编写一行JavaScript代码。由于采用xml集中管理表单验证,使得表单验证在整个系统中的耦合度大大降低,并且易维护性大大提高。开发者更多的精力可以投入到业务相关的代码中。<br><br>恰恰相反,JSValidation内部结构虽然不太简单(对用户而言),但是调用方式却极其简单,配置好环境后,只需要在需要验证表单的HTML标记中加上onsubmit="return doValidate('formId')"即可。这并没有改变开发者的习惯。<br><br>更为明显的优势是,JSValidation具备跨浏览器的能力。在目前的测试环境下,支持IE5及以上版本,Mozilla系列和支持DOM2模型的其他浏览器。你不用再考虑在多浏览器下如何兼容,JSValidation帮你做到了这些。<br><br>2. JSValidation能做什么,不能做什么?<br>如上所述,JSValidation能够校验表单。在系统复杂,表单复杂的场景下,JSValidation的优势更加突出。JSValidation目前能够完成客户端的13种验证如下:<br><br>取值非空 <br>必须为整数 <br>必须为双精度数 <br>必须为普通英文字符(字母,数字,下划线) <br>必须为中文字符 <br>最小长度 <br>最大长度 <br>是否为Email格式 <br>是否为日期格式(yyyy-mm-dd) <br>自定义的正则表达式 <br>整数范围(大于某数小于某数) <br>双精度数范围 <br>必须与某个域的值相同 <br>所有这些验证都在客户端完成。如果还有在此之外的验证需求,请告诉我们,我们会跟据需求程度开发出新的验证模型。<br><br>JSValidation不能做的:<br><br>跨页面的验证。例如,A页面输入值,必须满足B页面中某一个值的条件,或者更多的页面。这个需求需要用户的反馈。如果在现实开发中这种需求很普遍,我们会考虑开发。目前的替代方式是,将A页面需要验证的值POST到B页面的一个Hidden Field,然后再使用已有的验证方式。 <br>与服务器交互验证。最常见的是输入用户名密码后登录。限于它的表示范围,JSValidation不能完成这个工作。 <br>其他没有提到的,很希望你能告诉我们。 <br><br>请大家帮忙顶,这么好的东东不能叫他沉了啊<br>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值