js验证框架之RealyEasy验证详解


Posted in Javascript onJune 08, 2016

使用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里可以看到演示。

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

Javascript 相关文章推荐
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
JS定时关闭窗口的实例
May 22 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
Nuxt.js实战详解
Jan 18 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
node.js中path路径模块的使用方法实例分析
Feb 13 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 #Javascript
json的使用小结
Jun 08 #Javascript
使用Web Uploader实现多文件上传
Jun 08 #Javascript
浅析JSONP技术原理及实现
Jun 08 #Javascript
JSONP原理及简单实现
Jun 08 #Javascript
Javascript必知必会(四)js类型转换
Jun 08 #Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
php连接oracle数据库及查询数据的方法
2014/12/29 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
PHP创建XML接口示例
2019/07/04 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
浅析JavaScript中的array数组类型系统
2016/07/18 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
python中bytes和str类型的区别
2019/10/21 Python
Python 去除字符串中指定字符串
2020/03/05 Python
Django操作session 的方法
2020/03/09 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
医科大学生毕业的自我评价分享
2013/11/12 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
关于旷工的检讨书
2014/02/02 职场文书
与美同行演讲稿
2014/09/13 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书