JS验证框架的使用方法

今天着重介绍的是JS验证框架在Java Web项目中的应用,

 

JSValidation要去http://cosoft.org.cn/projects/jsvalidation中下载最新版本。

 

JSValidation可以实现的验证功能:

13种验证规则:
输入内容非空
输入数值必须为整数
输入数值必须为双精度浮点数
输入字符必须为普通英文字符(字母,数字,下划线)
输入字符必须为中文字符
输入的内容是否为Email格式
输入内容最大长度
输入内容最小长度
输入的内容是否为日期格式(yyyy-mm-dd)
自定义的正则表达式
输入数值的整数范围(大于某数而小于某数)
输入数值的双精度范围
输入内容必须与某个域的值相同。

 

这可以使我们联想到Struts中Validator插件的配置和使用 ,这个是验证插件。

 

不过我介绍的这个更好用一些。只需把三个文件移到Web-Root下,再在网页中加入两句关键的JavaScript语句就可以。

 

这三个文件是validation-config.dtd(关键文件,可能有关转码)、validation-framework.js、validation-config.xml。

 

其中validation-framework.js中的红色字体,这句是路径,如果三个文件放到Web-Root下就没必要修改。

/*
 * JavaScript Validation Framework
 *
 * Author: Michael Chen(mechiland) on 2004/03
 * This software is on the http://www.cosoft.org.cn/projects/jsvalidation
 * for update, bugfix, etc, you can goto the homepage and submit your request
 * and question.
 * Apache License 2.0
 * You should use this software under the terms.
 *
 * Please, please keep above words. At least ,please make a note that such as
 * "This software developed by Michael Chen(http://www.jzchen.net)" .
 * $Id: validation-framework.js,v 1.7 2004/04/30 05:33:29 jzchen Exp $
 */

/** Config Section, Config these fields to make this framework work. **/

// If there is only one config file in your system, use this property. otherwise, use
//     ValidationFramework.init("configfile")    
// instead.
var ValidationRoot = "";

// the field style when validation fails. it aim to provide more beautiful UI and more good
// experience to the end-user.
// NOTE: this will be buggy. Please report the error to me.
var ValidationFailCssStyle = "border:2px solid #FFCC88;";

//Validation function. The entry point of the framework.
function doValidate(formRef) {

。。。。。。

 

validation-config.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"><!--对映Html页面里Form的id-->
  <field name="username" display-name="用户名" onfail="">
   <depend name="required" />
   <depend name="commonChar" />
  </field>
  <field name="password" display-name="密码">
   <depend name="required" />
   <depend name="commonChar" />
  </field>
 </form>
</validation-config>

 

页面里

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<title>JavaScript Validation Framework</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" src="validation-framework.js"></script>
<SCRIPT LANGUAGE="JavaScript" src="site.js"></SCRIPT>
</head>

  <body>
  <div id="error" style="color:red;font-weight:bold;"></div>
    <form name="form1" id="form1" action="/webFormProject/servlet/login" method="post" οnsubmit="return doValidate('form1')">
      
      <table border="0">
        <tr>
          <td>用户名:</td>
          <td><input type="text" name="username"></td>
        </tr>
        <tr>
          <td>密码:<br></td>
          <td><input type="password" name="password"></td>
        </tr>
        <tr>
          <td><input type="submit" name="submit" value="登录"></td>
          <td align="center"><input type="reset" name="reset" value="重置"></td>
        </tr>
      </table>
    </form>
  </body>
</html>

 

红色部分要着重注意。

 

好了配置完成!

 

施杨出品!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSValidation是强大灵活的客户端验证框架。在应用服务器或者开发框架不提供验证的情况下,例如,普通的JSP, ASP, PHP等开发,以及一些不提供验证支持的开发框架,如Tapestry, Velocity等,JSValidation提供了一种灵活的解决方案。与其他验证方式相比,它最大的优点在于独立与易于集成。纯JavaScript结构,可以很容易的集成到现有的应用中而不论现有的应用是基于什么语言。将所有的表单验证集中管理,使得维护应用更加容易。简便的XML配置,易于扩充的验证方式(目前支持13种验证,囊括了大部分常用表单验证),使得JSValidation成为验证框架的首选。 <br>1. JSValidation是什么?<br>如首页所说,JSValidation是客户端表单验证框架,用在BS系统中,或者简单的网页系统中。表单验证在这些开发中很常见:新用户注册,需要校验某些字段;用户登陆,需要校验;等等。在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来与表单对象交互,并进行校验。常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等。根据一般的经验,如果表单中需要校验的域个数超过10个,开发过程就显得枯燥无味——多段重复的代码不断重复,如果要求跨浏览器,更多的考虑因素使人头疼不已。往往这个页面的验证还不能用于那个验证……虽然逻辑基本相同;但是在大多数情况下,出于种种原因,开发者宁愿(或者没办法)重新编写另一个页面的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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值