基于Prototype的ReallyEasy表单验证框架使用与定制

ReallyEasy验证框架概述

本文主要介绍如何利用ReallyEasy框架配合Prototype库来实现表单字段的验证功能，具体实施细节如下。

环境配置与初始化

首先，需要在项目中引入相关的JavaScript和CSS文件。

<link href="${ ctx}/skin/css/validation.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript" src="${ ctx}/scripts/prototype.js"></script> 
 
<script type="text/javascript" src="${ ctx}/scripts/effects.js"></script> 
 
<script type="text/javascript" src="${ ctx}/scripts/validation.js"></script> 

接着，在页面头部添加初始化代码。为了便于管理，这段代码通常被放置在每个JSP页面都会引用的meta.jsp文件中。

function afterLoaded(){ 
 
  if(document.all){ 
 
    var forms = document.forms; 
 
    if(forms.length > 0){ 
 
      for(var i = 0; i < forms.length; i++){ 
 
        if(forms[i]["method:save"]) 
 
          new Validation(forms[i]); 
 
      } 
 
    } 
 
    window.clearInterval(inteval); 
 
    inteval = null; 
 
  } 
 
} 
 
var inteval = window.setInterval("afterLoaded();", 500 );  

输入框验证规则配置

若需对特定输入框启用验证，只需在该元素的class属性中添加相应的标识符即可。例如：

<input type="text" name="payable.howMuch" value="" id="payable_howMuch" class="required validate-number"/>

上述代码表明该字段为必填项，且输入值必须为数字。其他验证规则可参考validation.js文件末尾的代码说明。

多按钮提交场景的定制修改

此外，我对validation.js进行了一定程度的修改。由于我们的表单包含多个Submit按钮，且仅在点击name为method:save的按钮时才需要触发验证逻辑，因此需要对验证脚本进行适配。

原始代码如下：

if(this.options.onSubmit) Event.observe(this.form,'submit',this.onSubmit.bind(this),false);

修改后的代码如下：

if(this.options.onSubmit) Event.observe(this.form["method:save"],'click',this.onSubmit.bind(this),false);

这种修改方式虽然存在局限性，但在当前项目环境下更为适用。

样式调整与扩展建议

原有的CSS样式对按钮外观产生了一定影响，因此我去除了相关的border样式定义。

该验证框架主要覆盖了一些常见场景，若需更灵活地使用，建议花时间深入研究其文档。框架还提供了callback机制，下载原版后可以在HTML示例中看到具体演示。

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。