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将string类型转换int类型
Dec 09 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
js创建对象的方法汇总
Jan 07 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
vue中使用mockjs配置和使用方式
Apr 06 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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
PHP文件操作方法汇总
2015/07/01 PHP
jQuery中index()的用法分析
2014/09/05 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
2017/05/20 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
动态创建类实例代码
2009/10/07 Python
在Python中关于中文编码问题的处理建议
2015/04/08 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python实现猜拳小游戏
2020/04/05 Python
Python shelve模块实现解析
2019/08/28 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python如何查看安装了的模块
2020/06/23 Python
django rest framework 过滤时间操作
2020/07/12 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
护士年终个人总结
2015/02/13 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
解析mybatis-plus中的resultMap简单使用
2021/11/23 Java/Android