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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
JavaScript ES6 Class类实现原理详解
May 08 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
收集的DedeCMS一些使用经验
2007/03/17 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
香港零食网购:上仓胃子
2020/06/08 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
店长岗位职责
2013/11/21 职场文书
服装厂厂长职责
2013/12/16 职场文书
毕业设计计划书
2014/01/09 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
会计出纳岗位职责
2015/03/31 职场文书
文明旅游倡议书
2015/04/28 职场文书
开票证明
2015/06/23 职场文书
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js
MYSQL中文乱码问题的解决方案
2022/06/14 MySQL