- 浏览: 141134 次
- 性别:
- 来自: 杭州
-
文章分类
最新评论
-
gadmyth:
beta reduction也介绍错了(λx . e)f →β ...
Lamda演算简介 -
gadmyth:
左结合法则是错的,因为Application binds mo ...
Lamda演算简介 -
hongmeikaile:
...
Struts2与ajax的组合 -
aguai0:
非常详细,学习了
prototype-1.3.1.js 开发笔记 -
左看右看:
...
DAO编程模式(转)
基于prototype.js验证框架(validation.js)的三个应用 ![](http://ajax.org/theme/images/Icon-Permalink.png)
最近对prototype.js用的比较多,同时发现了一个基于prototype.js的验证框架: validation.js really easy field validation with prototype,下面是我在开发中用到的三个例子.
前提条件:
首先要在html页面中引入几个js
<script type='text/javascript' src='../script/prototype.js'></script> <script type='text/javascript' src='../script/validation.js'></script> <script type='text/javascript' src='../script/effects.js'></script> (可选)
加几段css
input.disabled { border: 1px solid #F2F2F2; background-color: #F2F2F2; }input.required, textarea.required { border: 1px solid #00A8E6; }
input.validation-failed, textarea.validation-failed { border: 1px solid #FF3300; color : #FF3300; } input.validation-passed, textarea.validation-passed { border: 1px solid #00CC00; color : #000; }
.validation-advice { margin: 5px 0; padding: 5px; background-color: #FF3300; color : #FFF; font-weight: bold; }
应用一:该例子仅使用前台脚本进行验证
需求:
查询条件
- 当CSO NO、AGREEMENT NO、流水号中任一项有值时,其他项都可为空
html代码:
<td class = "label">CSO Number</td> <td><input type="text" name="csoNumber" id = "csoNumber"></td> <td class = "label">Agreement Number</td> <td><input type="text" name="agreementNumber" id = "agreementNumber"></td> <td class = "label">SequenceNumber Number</td> <td><input type="text" name="sequenceNumber" id = "sequenceNumber"></td> <td class = "label">Tariff Code</td> <td><input type="text" name="tariffCode" id = "tariffCode"></td> <td colspan = "6" align = "center"><button class = "submit" id = "search">Search</button></td>
javascript脚本:
window.onload = function(){ // 注册查询按钮事件 Event.observe("search", "click", function(){ var validator = Validation.get("IsEmpty"); if ([$F("csoNumber"), $F("agreementNumber"), $F("sequenceNumber")].all(validator.test)){ ["required"].all(Validation.test.bind($("tariffCode"))); }});
应用二: 该例子通过ajax结合后台来进行验证
需求:
sapid和password必输
且必须从后台数据库找到sapid和password对应的记录, 否则登陆不成功,并给出提示信息
html代码:
<form method=post action="requisition.html" id = "frmLogin"> <table align = "center" style = "height:100%"> <tr> <td> <fieldset style = "padding:10px"> <legend>Login</legend> <table> <tr><td colspan = "2"><input type = "hidden" id = "errMsg"></td></tr> <tr> <td class = "label"><span class = "requiredFlag">*</span>SAP ID</td> <td><input type="text" name="sapId" id = "sapId" class = "required"></td> </tr> <tr> <td class = "label"><span class = "requiredFlag">*</span>Password</td> <td><input type="password" name="password" id = "password" class = "required"></td> </tr> <tr> <td colspan = "2" align = "center"><input type = "submit" class = "submit" value = "Login"> <button class = "submit" onclick = "Login.goRegister()">Register</button></td> </tr> </table> </fieldset> </td> </tr> </table> </form>
javascript脚本
window.onload = function(){ // 自定义验证器并注册到Validation中 var validatorName = "validate-login-info"; Validation.add(validatorName, "", function(){return false;});// 验证器初始化 var validator = new Validation('frmLogin', {stopOnFirst:true, immediate:true});
// 提交前进行后台验证 Event.observe("frmLogin", "submit", function(ev){ var result = validator.validate(); if (result){ var request = new Ajax.Request( "http://localhost:8080/agreement/CheckLoginInfo", // 提交的URL { method: 'get', asynchronous: false, parameters: Form.serialize("frmLogin"), }); // 验证不通过,显示出错信息, 并中止提交操作! var transport = request.transport; if (transport.responseText != ""){ Validation.get(validatorName).error = transport.responseText; [validatorName].all(Validation.test.bind($("errMsg"))); Event.stop(ev); } } }) }
应用三:
需求:典型注册应用, 密码和确认密码的一致性验证
html代码:
<form method=post action="" id = "frmRegister"> <table align = "center" style = "height:100%"> <tr> <td> <fieldset style = "padding:10px"> <legend>Register</legend> <table> <tr> <td class = "label"><span class = "requiredFlag">*</span>SAP ID</td> <td><input type="text" name="sapId" id = "sapId" class = "required"></td> </tr> <tr> <td class = "label"><span class = "requiredFlag">*</span>Password</td> <td><input type="password" name="password" id="password" class = "required"></td> </tr> <tr> <td class = "label"><span class = "requiredFlag">*</span>Re-Password</td> <td><input type="password" name="repassword" id="repassword" class = "validate-identical"></td> </tr> <tr> <td colspan = "2" align = "center"><input type = "submit" class = "submit" value = "Register"></td> </tr> </table> </fieldset> </td> </tr> </table> </form>
javascript脚本:
window.onload = function(){ // 添加password一致性验证 Validation.add("validate-identical", "the value of password and repassword must be identical", function(v){ return !Validation.get('IsEmpty').test(v) && v == $F("password"); })// 验证器注册 var validator = new Validation('frmRegister', {stopOnFirst:true, immediate:true}); }
发表评论
-
ajax的url编码问题
2007-06-29 18:51 1884在进行ajax的post数据提交时,中文的c处理方式是urle ... -
Javascript变换表格内容
2007-06-06 11:05 1572[code<script language=" ... -
struts ajax
2007-05-25 20:23 1374转贴请保留作者--简单就好,和出处。谢谢! 去年初,正好负责 ... -
Prototype使用指南之string.js
2007-05-24 11:10 1303Prototype使用指南之string.js2007-05- ... -
如何设置RESIN服务器能让用户直接下载csv文件
2007-04-19 16:08 2379<mime-mapping> <extens ... -
JS一些技巧收藏
2007-03-28 12:01 1089事件源对象 event.srcEleme ... -
js变量作用域及可访问性的探讨
2007-03-27 15:43 1432每一种语言都有变量的概念,变量是用来存储信息的一个元素。比如 ... -
JSON,JavaScript Object Notiation
2007-03-22 08:51 1269Ajax(Asynchronous JavaScript an ... -
面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax
2007-03-21 16:11 963虽然令人兴奋,但是把 ... -
介绍 JSON
2007-03-21 15:48 1133JSON(JavaScript Object Notation ... -
最简单的表单验证框架 EasyValidation
2007-03-16 13:58 2295主要特征 简洁的验证语法 快速 ... -
prototype-1.4.0注释版本
2007-03-01 16:57 1645/* Prototype JavaScript framew ... -
prototype-1.3.1.js 开发笔记
2007-02-28 17:03 23051. Prototype是什么? ... -
AJAX开发简略 (第一部分)
2007-02-12 16:06 1164在使用浏览器浏览网页 ... -
AJAX开发简略 (第二部分)
2007-02-12 16:04 917AJAX开发简略 (第二部分) ... -
AJAX框架之DOJO
2007-02-12 15:36 1869AJAX ...
相关推荐
jquery.validate Validation .js验证框架 帮助 手册 文档.chm 版本 方面查询 (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具...
jquery.validate Validation .js验证框架 帮助 手册 文档.doc (一)、可选项( options ) 1 (二)插件方法 (jQuery validation) 6 (三、四)选择器及实用工具 (jQuery validation) 7 四、实用工具(Utilities) 8 ...
简洁,快速的验证语法 无需编写验证提示信息(当然也支持自定义提示信息) 错误消息在指定地方显示 支持组合验证 Ajax支持 基于prototype.js 支持国际化 易于扩展 基于标准的Html属性...
validation.js是一个基于prototype表单前端验证工具,与其它库相比,简单易用.
jquery1.4.js jquery-validation.min.js 里面包括这两给个js包 都是最小版的
一款基于Prototype的Validation表单验证插件,实现Ajax风格的无刷新表单验证功能,当用户输入完表单,即时显示该项输入是否正确,不正确则会给出提示,适合那些比较喜欢简洁风格,又要求功能准确的用户,本款表单...
form-validation.js现场例子vue @ 2 + element-ui特征直观的API。 :bullseye: 异步规则支持。 嵌套对象/ Aray支持。 数组操作(推,弹出,移位,不移位,拼接,反向)支持。 零依赖关系,仅本机Javascript。概述...
formvalidation.io, FormValidation官方网站 formvalidation.io这个存储库包含了 formvalidation.io的源代码。安装$ gem install jekyll$ gem install bundler转到 root 目录并安
表单验证JQ插件jquery-validation.js
这是一个验证框架,并且是一个 独立的验证框架 ,不依赖与其他已有的框架; 可以自由的嵌入到其他框架,比如Spring、Struts等流行框架,但实质来说他是独立的,所以无所谓嵌入到哪里,如果需要在GUI桌面应用中,也是...
jar包,官方版本,自测可用
COKE.js 是一个轻量级的 Node.js MVC 框架,可以加快你 web 程序的开发。COKE 是在 Express 的基础上建立的,所以用户可以使用所有的 Express 的 middlewares ,可以直接连接 Express。 特性: MVC structure. ...
赠送jar包:jakarta.validation-api-2.0.2.jar; 赠送原API文档:jakarta.validation-api-2.0.2-javadoc.jar; 赠送源代码:jakarta.validation-api-2.0.2-sources.jar; 赠送Maven依赖信息文件:jakarta.validation...
import Validation from 'common/util/validation'; let validator = new Validation(); validator.addByValue('username',[ { strategy:'isEmpty', errorMsg:'不能为空' }, { strategy:'hasSpace', errorMsg...
欢迎大家提出改进,以便框架完成的更好如果需要,我会在将来开发出与服务端结合的开发框架,如struts and struts2 并且感谢原作者这么棒的Idea: http://tetlaw.id.au/view/blog/really-easy-field-validation-w
框架验证validation 框架验证validation
丰富的校验规则,样式,支持动态添加元素的校验方式。
jquery.validation.js和用法,包括代码,CSS样式和例子。方便使用。
struts验证框架-validation的验证框架
【JavaScript】jquery.validation.js