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" onsubmit="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>

 

红色部分要着重注意。

 

好了配置完成!


本文转自施杨博客园博客,原文链接:http://www.cnblogs.com/shiyangxt/archive/2008/07/26/1252129.html,如需转载请自行联系原作者

相关文章
|
30天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
1月前
egg.js 24.18参数验证
egg.js 24.18参数验证
29 0
egg.js 24.18参数验证
|
3月前
|
存储 JavaScript 前端开发
账号登录验证(原生js,本地存储)
账号登录验证(原生js,本地存储)
27 0
|
3月前
|
前端开发 JavaScript 开发者
什么是 Angular 框架中的 Zone.js
什么是 Angular 框架中的 Zone.js
27 0
|
4月前
|
开发框架 JSON JavaScript
Node.js教程-express框架
Node.js教程-express框架
39 1
|
11天前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
1月前
|
前端开发 JavaScript 机器人
详解《基于 javascript 的流程图编辑框架LogicFlow
详解《基于 javascript 的流程图编辑框架LogicFlow
44 0
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
1月前
|
前端开发 JavaScript API
编程笔记 html5&css&js 011 HTML内连框架
编程笔记 html5&css&js 011 HTML内连框架
|
2月前
|
设计模式 前端开发 JavaScript
开源专访:Strve.js框架作者Vam
开源专访:Strve.js框架作者Vam
40 2