基于prototype.js验证框架(validation.js)的三个应用
最近对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}); }