1、JSValidation是什么？

JSValidation是客户端表单验证框架，用在BS系统中，或者简单的网页系统中。表单验证在这些开发中很常见：新用户注册，需要校验某些字段；用户登陆，需要校验；等等。在这之前，页面开发者（JavaScript开发者）需要编写大量的JavaScript来与表单对象交互，并进行校验。常见的校验如不能为空，必须满足长度要求，必须为数字，必须为Email等等。根据一般的经验，如果表单中需要校验的域个数超过10个，开发过程就显得枯燥无味——多段重复的代码不断重复，如果要求跨浏览器，更多的考虑因素使人头疼不已。往往这个页面的验证还不能用于那个验证……虽然逻辑基本相同；但是在大多数情况下，出于种种原因，开发者宁愿（或者没办法）重新编写另一个页面的JavaScript代码。

JSValidation致力于改善这一过程。它将常见的校验（目前支持13种）封装起来，并创造性的采用xml来存贮表单验证信息，使得表单的验证成为整个项目中最不重要的环节，开发者只需要定义几个xml标记，就可以创建出复杂的验证策略，而不用编写一行JavaScript代码。由于采用xml集中管理表单验证，使得表单验证在整个系统中的耦合度大大降低，并且易维护性大大提高。开发者更多的精力可以投入到业务相关的代码中。

恰恰相反，JSValidation内部结构虽然不太简单（对用户而言），但是调用方式却极其简单，配置好环境后，只需要在需要验证的表单的HTML标记中加上οnsubmit="return doValidate(‘formId’)"即可。这并没有改变开发者的习惯。

更为明显的优势是，JSValidation具备跨浏览器的能力。在目前的测试环境下，支持IE5及以上版本，Mozilla系列和支持DOM2模型的其他浏览器。你不用再考虑在多浏览器下如何兼容，JSValidation帮你做到了这些。

2、JSValidation能做什么，不能做什么？

2.1.1 JSValidation能够校验表单

在系统复杂，表单复杂的场景下，JSValidation的优势更加突出。JSValidation目前能够完成客户端的13种验证如下：

取值非空

必须为整数

必须为双精度数

必须为普通英文字符（字母，数字，下划线）

必须为中文字符

最小长度

最大长度

是否为Email格式

是否为日期格式（yyyy-mm-dd）

自定义的正则表达式

整数范围（大于某数小于某数）

双精度数范围

必须与某个域的值相同

所有这些验证都在客户端完成。如果还有在此之外的验证需求，请告诉我们，我们会跟据需求程度开发出新的验证模型。

2.1.2 JSValidation不能做的：

跨页面的验证。例如，A页面输入值，必须满足B页面中某一个值的条件，或者更多的页面。这个需求需要用户的反馈。如果在现实开发中这种需求很普遍，我们会考虑开发。目前的替代方式是，将A页面需要验证的值POST到B页面的一个Hidden Field，然后再使用已有的验证方式。

与服务器交互验证。最常见的是输入用户名密码后登录。限于它的表示范围，JSValidation不能完成这个工作。

其他没有提到的，很希望你能告诉我们。

3、 什么情况下，我应该使用JSValidation？

如果没有现成的验证参考，就使用它吧。

有很多的开发工具、开发框架（模型）都已经提供了验证支持，如ASP.NET，Struts。但是还有更多的Framework没有提供支持，例如我们使用的Velocity（也许它不能称为框架），以及其他的ASP, PHP, Pure JSP, CGI等等。也许没有成熟的框架使用。如果没有，JSValidation也许能够帮助你减轻客户端校验编程的压力，让你有更多的精力投入对业务的关注中。

另外，如果你的系统很小，或者系统中需要校验的很少——例如只有一个登陆的用户名、密码需要校验，那么基于性能考虑，我们不建议你采用JSValidation。JSValidation库文件达到22KB，加上验证文件，也许要在你的页面上加载额外的26K+才能运行。而相同的功能，自己按照常规方式写也不过几行。

当然，如果你现有的开发过程中已经有了自己的模型，很熟悉也很牢固了，尽可能采用你自己的方式吧。

4、在项目中快速使用jsvalidation

4.1.1、获取jsvalidation

官方下载：http://cosoft.org.cn/projects/jsvalidation（目前好像打不开）

本地下载：http://www.blogjava.net/Files/sxyx2008/jsvalidation.zip

4.1.2、配置环境

首先将validation-framework.js和validation-config.xml复制到项目的某一目录下

例如：

  1.     打开validation-framework.js，找到var ValidationRoot = ""; 将这行代码更改为var ValidationRoot = "js/"; (就是validation-config.xml文件的位置)。

  2.     在你需要进行校验的页面中，加入jsvalidation的引用：

  1.     在该页面需要验证的表单Form标记中，加入on submit="return doValidate('formId')"。其中formID是该Form的id。

  2.     完成。

4.1.3、编写validation-config.xml

validation-config.xml是集中管理表单的存放点，也是JSValidation处理验证条件的地方。

  1.    - 文件格式

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

  2.    - 基本结构

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

  1.    节点说明

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不同，各有不同取值。

一个范例：

<!--校验用户注册--> <?xml version="1.0" encoding="utf-8"?><!DOCTYPE validation-config SYSTEM "validation-config.dtd"><validation-config lang="auto"><form show-error="errorDiv" id="registerForm" show-type="first"><field display-name="用户名" name="username"><depend name="required"/><depend name="commonChar"/><depend name="minLength" param0="6"/><depend name="maxLength" param0="8"/></field><field display-name="密码" name="password"><depend name="required"/><depend name="commonChar"/><depend name="minLength" param0="6"/><depend name="maxLength" param0="8"/></field><field display-name="重复密码" name="repassword"><depend name="required"/><depend name="commonChar"/><depend name="minLength" param0="6"/><depend name="maxLength" param0="8"/><depend name="equalsField" param0="password"/></field><field display-name="年龄" name="age"><depend name="required"/><depend name="integerRange" param0="18" param1="60"/></field><field display-name="年出生年月" name="birthday"><depend name="required"/><depend name="date" param0="yyyy-mm-dd"/></field><field display-name="电子邮件" name="emails"><depend name="required"/><depend name="email"/></field></form></validation-config>

4.1.4. 校验表单

编写完validation-config.xml后，就可以按照上面的部署方法进行部署。

5、 JSValidation支持的13种验证

6、完整的例子（实现用户注册验证）

6.1.1、项目目录

结合以上目录注意修改文件中21行路径

在jsp页面中引入文件

6.1.2、注册页面内容

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>用户注册</title><script type="text/javascript" src="js/validation-framework.js"></script></head><body><div id="errorDiv"></div><form action="http://www.google.cn" method="post" id="registerForm" onsubmit="return doValidate('registerForm')"><table align="center" style="border: 1px solid; border-collapse: collapse;" width="300" height="300" border="1" bordercolor="blue"><caption>用户注册</caption><tr><td align="right">用户名:</td><td><input id="username" type="text"/></td></tr><tr><td align="right">密码:</td><td><input id="password" type="password"/></td></tr><tr><td align="right">重复密码:</td><td><input id="repassword" type="password"/></td></tr><tr><td align="right">年龄:</td><td><input id="age" type="text"/></td></tr><tr><td align="right">出生年月:</td><td><input id="birthday" type="text"/></td></tr><tr><td align="right">email:</td><td><input id="emails" type="text"/></td></tr><tr><td></td><td><input type="submit" value="注册"/><input type="reset" value="取消"/></td></tr></table></form></body></html>

6.1.3、配置validation-config.xml文件

（针对上述用户注册表单信息validation-config.xml文件配置信息如下）

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE validation-config SYSTEM "validation-config.dtd"><validation-config lang="auto"><form show-error="alert" id="registerForm" show-type="all"><field display-name="用户名" name="username"><depend name="required"/><depend name="commonChar"/><depend name="minLength" param0="6"/><depend name="maxLength" param0="8"/></field><field display-name="密码" name="password"><depend name="required"/><depend name="commonChar"/><depend name="minLength" param0="6"/><depend name="maxLength" param0="8"/></field><field display-name="重复密码" name="repassword"><depend name="required"/><depend name="commonChar"/><depend name="minLength" param0="6"/><depend name="maxLength" param0="8"/><depend name="equalsField" param0="password"/></field><field display-name="年龄" name="age"><depend name="required"/><depend name="integerRange" param0="18" param1="60"/></field><field display-name="年出生年月" name="birthday"><depend name="required"/><depend name="date" param0="yyyy-mm-dd"/></field><field display-name="电子邮件" name="emails"><depend name="required"/><depend name="email"/></field></form></validation-config>

对于里面具体的配置信息我不在阐述，如有不懂的大家可以查询jsvalidation的文档，这里提醒大家在项目中长疏忽的地方及应注意的事项

       i.              整个项目文件的编码问题：

最好统一编码为utf-8，这里需要注意的是文件默认的编码格式是gbk建议大家统一更换为utf-8否则里面的中文字符乱码达不到预期的效果，我在初次使用的时候就疏忽了这个地方，结果浪费了好多时间

     ii.              注意路径问题，这里告诉大家一个快捷方法：在jsp中引用文件时，选中该文件然后拖到页面中松开鼠标，大家会发现奇迹出现了，这个文件已经被引用进来了，而且保证不会出错

这块应注意两处的路径问题：

(a)jsp页面中引用文件的路径

(b) 文件中的路径问题：

其中var ValidationRoot的值可直接拷贝在jsp中引用文件路径的前半部分

如：

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

即你只需拷贝“js/”部分去填充var ValidationRoot的值

    iii. 验证email类型表单属性：

在验证email类型表单属性时，你必须同时指定

<depend name="required"/><depend name="email"/>

否则在验证email时将不起作用

   iv. validation-config.xml文件中<form> 标签属性配置

  1.   show-error

show-error属性用来确定以何种方式展现错误信息,其取值有alert/errorDiv, alert就不用解释了, errorDiv就是以div的形式提示错误信息,这就需要你在jsp页面中定义一个div其id应为errorDiv,

如：

,最终错误信息将会显示在该div中

  1.   id

id对应jsp页面中form的id属性

  1.   show-type

show-type属性用来确定错误信息显示的条目,其取值为all/first

all一次性显示所有的错误信息（从第一个不合法的表单属性一次性校验）

first每次只显示一条（从第一个不合法的表单属性逐个校验）

客户端验证：Validation相关推荐

  1. Struts2.0下的客户端验证

    Struts2.0 默认提供了 simple,xhtml,css_xhtml,ajax  几个模板主题, 但对于 simple 不支持客户端的js验证. 对 simple 和xhtml 下的几个文件进 ...

  2. ASP.NET MVC如何实现自定义验证（服务端验证+客户端验证）

    ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需要将相应的ValidationAttri ...

  3. html5 如何实现客户端验证上传文件的大小

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...

  4. 如何上传html验证文件大小,html5 实现客户端验证上传文件的大小(简单实例)

    在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...

  5. [jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由...

    2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...

  6. 客户端验证不能代表服务器端验证

    比如设置取款额度不能大于100元, 客户端写法如下: <asp:Button ID="txtSubmit" runat="server"  OnClien ...

  7. SAP UI5 应用开发教程之四十六 - 使用 Message Manager 实现开箱即用的验证(Validation)信息抛出

    一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

  8. 登陆界面(jsp)客户端验证

    第二步:通过servlet处理 import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; ...

  9. HTTPS 客户端验证 服务端证书流程

    证书预置和申请 1:客户端浏览器会预置根证书, 里面包含CA公钥 2:服务器去CA申请一个证书 3: CA用自己的签名去签一个证书,指纹信息保存在证书的数字摘要里面, 然后发送给服务器 一次访问流程( ...

  10. DockerCompose MongoDB 副本集(集群) （客户端验证密码 - 集群内部使用mongodbKeyfile验证 ） 部署

    本部署MongoDB副本集是没有用其他的配置什么的(例如: mongodb-compass).是最简单的一个 我是为了mongodb的事务才配置的这个副本集,要使用mongodb的事务必须要副本集. ...

最新文章

  1. Spring 容器IOC解析及简单实现
  2. linux不断安装操作系统,无人值守批量安装linux操作系统
  3. IAR J-Link下载程序出现错误提示：Failed to get CPU status after 4 retries Retry?
  4. python-IO多路复用，select模块
  5. sublimeformaya
  6. 直播丨BMMeetup第2期：大模型计算加速技术，2场特邀和7位青年学者技术报告联袂上演...
  7. 移植u-boot-2012.04.01到jz2440开发板
  8. python 爬虫 包_python爬虫学习之路-抓包分析
  9. java如何获得当前路径_在java中如何得到当前路径
  10. 图像傅里叶变换的幅度谱、相位谱以及双谱重构原图像
  11. 哈佛大学幸福课-笔记
  12. log4j2.xml 配置文件详解
  13. 二元二次方程例题_二元二次方程组-解法-例题
  14. 前端判断文件后缀名_JS - 获取文件后缀，判断文件类型（比如是否为图片格式）...
  15. APP推广：app推广的渠道有哪些既简单又有效的？
  16. 华为HCNA网络工程师【从入门到精通】自学视频[肖哥]-肖宗鹏-专题视频课程
  17. Jenkins踩坑：Failed to connect to repository : Error performing git command: git ls-remote -h http://17
  18. Vivado安装—Xilinx design tool already exists for 2019.1,specify a different program program group entr
  19. CSP-S 2020 T1 P7075 儒略日
  20. linux免采集卡直播ps4,PS4游戏直播采集卡使用教程详解

热门文章

  1. html 放大镜 js,原生js实现简单的放大镜效果
  2. 智云通CRM：如何经营好企业中的数据？
  3. python实时语音智能聊天＜讯飞语音识别+青云客机器人＞
  4. 规模最小的计算机网络至少有几台,【单选题】按照网络规模大小定义计算机网络,其中规模最小的是 A. 广域网 B. Internet C. 城域网 D. 局域网...
  5. NASA成立寻找外星人小组，三全水饺回应猪瘟，微波炉+葡萄=爆炸，94年故宫首次晚间开放，这就是今天的大新闻！...
  6. 【软件测试随笔】web测试点App测试点
  7. 错失电商的国美，能否抓住新零售这根救赎稻草
  8. Oracle 11g R2 RAC Hands on Training RAC 性能优化
  9. Controller控制器
  10. python批量识别图片中文字_Python识别图片中的文字