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 相关文章推荐
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
Dec 01 Javascript
jQuery轮播图实例详解
Aug 15 jQuery
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
非常实用的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
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
angularjs中ng-bind-html的用法总结
2017/05/23 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
django使用html模板减少代码代码解析
2017/12/12 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
python中的tcp示例详解
2018/12/09 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
python循环输出三角形图案的例子
2019/11/22 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
python利用faker库批量生成测试数据
2020/10/15 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
Weblogic的布署方式
2013/08/23 面试题
护理自荐信范文
2013/10/05 职场文书
护士自荐信范文
2013/12/15 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
实习护士自荐信
2014/06/21 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
亮剑观后感500字
2015/06/05 职场文书
迎新生晚会主持词
2015/06/30 职场文书
交流会主持词
2015/07/02 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书