`
天空之城
  • 浏览: 404605 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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>

 

红色部分要着重注意。

 

分享到:
评论

相关推荐

    js validate 非常强大的js验证框架

    这个强大的验证框架允许开发者以灵活、可扩展的方式对用户提交的数据进行实时检查,从而提升用户体验并减少服务器端的压力。 `js validate`框架的核心功能包括: 1. **基本验证规则**:框架内置了多种常见的验证...

    javascript验证框架

    JavaScript验证框架如jQuery Validation、Validator.js、Formik等,都是实现上述功能的实例。它们不仅提供了基本的验证功能,还具有丰富的社区插件和定制选项,使得开发复杂的验证场景变得更加便捷。了解并掌握这些...

    js验证框架

    JavaScript验证框架是Web开发中常用的一种工具,它用于在客户端对用户输入的数据进行实时检查,以确保数据的有效性和合规性,从而减少服务器端的压力并提供更好的用户体验。本项目提供的"js验证框架"是一个轻量级的...

    Js验证框架使用示例

    JavaScript验证框架是前端开发中不可或缺的一部分,主要用于在用户提交数据前进行实时的客户端验证,以提高用户体验并减轻服务器端的压力。本示例将探讨如何利用Js验证框架进行有效的数据校验,以`validate.js`为例...

    jquery-validate验证框架使用详解

    jQuery Validate 是一个强大的JavaScript验证库,它为网页表单提供了灵活且易于使用的验证功能。这个框架可以帮助开发者轻松地实现对用户输入数据的有效性检查,确保数据的准确性和完整性,从而提高用户体验并减少...

    Form验证框架 JS

    **JavaScript表单验证框架** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合特定的...在实际项目中,应根据具体需求选择合适的验证框架,并熟练掌握其使用方法,以便更好地服务于前端开发工作。

    一套精简版的js前台验证框架(非常实用)

    "一套精简版的js前台验证框架"就是为此目的而设计的工具,它能够帮助开发者快速、高效地实现对用户输入的验证。 这套验证框架的特点在于其精简性和实用性。精简意味着它可能包含了最基础但常用的验证规则和方法,...

    气泡javascript验证框架

    要实现"气泡javascript验证框架",首先需要了解`validate.js`的基本用法,包括定义验证规则、注册验证方法和绑定验证事件。然后,你需要修改`validate.js`的源代码,找到处理提示信息的部分,并将其替换为气泡效果的...

    JS客户端表单验证框架

    在使用**JS客户端表单验证框架**时,开发者不再需要手动编写复杂的JavaScript函数来处理每个验证规则。框架内包含了一套完善的规则定义系统,允许开发者根据业务需求设置各种验证条件,如必填、邮箱格式、电话号码、...

    js 验证框架(caChecker1_0_2) 验证表单 只需要注入需要验证的id即可

    在这个场景中,我们讨论的是一个名为"caChecker1_0_2"的JavaScript验证框架,它专用于表单验证。这个框架的亮点在于其便捷性——只需注入需要验证的表单元素ID,即可实现高效、灵活的验证功能。 表单验证是网页开发...

    易用又灵活的js验证框架

    - **BaseValidator**:基础验证器,提供验证框架的基本结构和通用方法。 - **EmailValidator**:电子邮件验证器,检查输入是否符合电子邮件格式。 - **RequiredValidator**:必填验证器,确保字段不为空。 - **...

    js验证框架(eclipse)

    JavaScript验证框架在Web应用开发中扮演着至关重要的角色,它能确保用户在提交表单时输入的数据符合预设的规则,从而减少服务器端的压力并提供更好的用户体验。"js验证框架(eclipse)"是一个专为Eclipse集成开发环境...

    更新一下js验证框架

    JavaScript验证框架是前端开发中必不可少的一部分,用于在用户提交数据前进行实时的输入验证,确保数据的完整性和正确性,从而提高用户体验并减轻后端服务器的负担。在更新JavaScript验证框架时,我们需要关注其功能...

    简易的表单js验证框架,解决复杂的页面验证过程

    标题中的“简易的表单js验证框架”指的是一个JavaScript库,专门用于简化和优化网页上的表单验证过程。在Web开发中,表单验证是必不可少的一环,它确保用户输入的数据符合预设的规则,例如邮箱格式正确、密码强度...

    jquery-validate验证框架使用详解及JS文件

    这个验证框架极大地简化了用户输入数据的检查过程,使得网页应用可以确保用户提交的信息满足预设的规则。以下是对`jQuery Validate`框架的详细说明以及相关JS文件的解释。 ### jQuery Validate 框架 `jQuery ...

    mvc模式的javascript验证框架

    **标题解析:**“mvc模式的javascript验证框架” 在软件开发中,MVC(Model-View-Controller)模式是一种常用的设计模式,它将应用程序的数据模型、用户界面和控制逻辑分离,提高了代码的可维护性和可扩展性。在这...

Global site tag (gtag.js) - Google Analytics