js验证框架之RealyEasy验证详解_javascript技巧

使用Really_easy_field_validation_with_Prototype进行表单验证,具体内容如下

1、第一步当然是先引入js和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>

2、然后我在页面的开头添加了如下代码(我把这段代码放在meta.jsp里的,因为每个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 );

3、如果要对一个输入框进行验证,只要在他的class里添加一些标志即可。如

复制代码 代码如下:

<input type="text" name="payable.howMuch" value="" id="payable_howMuch" class="required validate-number"/>
  
这表示这个字段必填,而且需要是数字。其他的内容,看一下validation.js末尾的代码就明白了。 
4、另外我对validation.js做了点修改,因为我们的一个表单有多个submit按钮,并且一般的只有name=method:save的按钮被点击时才需要触发验证,所以修改了验证js。
将原来的  

复制代码 代码如下:

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);  

这样也存在问题,但对于我们现在的样子,这个更合适些。 
5、原来的css对按钮等造成了影响,所以我把那些border的内容都去掉了。
6、这个验证框架好像只考虑了一些情况,若要灵活使用还要花点时间具体了解了才行,还提供了callback机制,下载他的原版后,在html里可以看到演示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js验证
, js验证框架
RealyEasy验证
easydarwin代码详解、easypr 开发详解、easycwmp 详解、easy框架、easy ui框架,以便于您获取更多的相关知识。

时间: 2024-11-08 13:54:38

js验证框架之RealyEasy验证详解_javascript技巧的相关文章

JS JSOP跨域请求实例详解_javascript技巧

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. 1.什么是JSONP? 要了解JSONP,不得不提一下JSON,那么什么是JSON? JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the langu

js匿名函数作为函数参数详解_javascript技巧

由衷的感叹,js真是烦. 学到现在,渐渐理解了什么是:语言都是通用的,没有好不好,只有擅长不擅长. 继承,多态,甚至指针,c能实现,c++,java有,javascript(和java是雷锋和雷峰塔的区别,名字上不知道坑了多少人)也能变通实现. 温故知新,今天又回味了一遍,匿名函数作为函数参数. 代码很短,五脏俱全. <!DOCTYPE html> <html lang="en"> <head> </head> <body>

基于js对象,操作属性、方法详解_javascript技巧

一,概述 在Java语言中,我们可以定义自己的类,并根据这些类创建对象来使用,在Javascript中,我们也可以定义自己的类,例如定义User类.Hashtable类等等. 目前在Javascript中,已经存在一些标准的类,例如Date.Array.RegExp.String.Math.Number等等,这为我们编程提供了许多方便.但对于复杂的客户端程序而言,这些还远远不够. 与Java不同,Java2提供给我们的标准类很多,基本上满足了我们的编程需求,但是Javascript提供的标准类很

原生js封装的一些jquery方法(详解)_javascript技巧

用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

JS触发服务器控件的单击事件(详解)_javascript技巧

如下所示: <script src="../Js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#a_doClick").click(function () { $("#<%=btnTest.ClientID%&g

D3.js实现折线图的方法详解_javascript技巧

前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>

D3.js实现雷达图的方法详解_javascript技巧

前言 再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC

JS组件Bootstrap Select2使用方法详解_javascript技巧

在介绍select组件的时候,之前分享过一篇JS组件中bootstrap multiselect两大组件较量的文章,这两个组件的功能确实很强大,本文分享下select组件的一些用法和特性. 一些通用的单选.多选.分组等功能这里就不多做介绍了,multiselect这方面是强项.重点介绍下select2的一些特性效果:一.特性效果1.多选效果 可以设置最多只能选几个 2.图文结合的效果 3.远程搜索功能(即在用户输入搜索内容时动态去后台取数据) 输入内容前 输入空格搜索出全部 滚动条滑动到底部自动

vue.js表格组件开发的实例详解_javascript技巧

前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone

js显示动态时间的方法详解_javascript技巧

本文实例讲述了js显示动态时间的方法.分享给大家供大家参考,具体如下: Date对象的方法 Date 对象能够使你获得相对于国际标准时间(格林威治标准时间,现在被称为 UTC-Universal Coordinated Time)或者是 Flash 播放器正运行的操作系统的时间和日期.要使用Date对象的方法,你就必须先创建一个Date对象的实体(Instance). Date 对象必须使用 Flash 5 或以后版本的播放器. Date 对象的方法并不是静态的,但是在使用时却可以应用于所指定的