最近對prototype.js用的比較多,同時發現了一個基于prototype.js的驗證框架: [url＝http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype]validation.js really easy field validation with prototype[/url],下面是我在開發中用到的三個例子.
前提條件:
首先要在html頁面中引入幾個js
Html代碼
<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
Html代碼
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、流水號中任一項有值時，其他項都可為空
2. 當CSO NO、AGREEMENT NO、流水號三項都為空時，TARIFF CODE為必輸，其他項選輸
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});???
}??
轉自：
http://www.javaeye.com/topic/155337