基于prototype.js验证框架做表单校验
转载于罗马集市有一个validation框架非常优雅地实现表单校验，它基于prototype,script.aculo.us。
从 http://tetlaw.id.au/view/javascript/really-easy-field-validation 下载，有一个简单而详细的例子说明它的用法 。
I. 首先在页面头部引入js库
<script type='text/javascript' src='prototype.js'></script> <script type='text/javascript' src='validation.js'></script> <script type='text/javascript' src='effects.js'></script>
II. 加入一段css代码
<style> 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; } </style>
III. HTML代码
<form id="test" action="#" > <table border="1px"> <tr> <td class = "label">Username</td> <td><input type="text" name="username" id = "username" class="required"></td> </tr> <tr> <td class = "label">Telephone Number</td> <td><input type="text" name="telephoneNumber" class="required validate-alphanum" id = "telephoneNumber"></td> </tr> <tr> <td colspan = "2" align = "center"> <button class = "submit" id = "search">Search</button> </td> </tr> <table> </form> <script> var valid = new Validation('test', {immediate : true}); </script>
当运行该页面，如果username不输入任何文字或者telephoNumber输入非数字和字母时，点击search按钮时，将看到错误信息提示。
http://koda.iteye.com/upload/picture/pic/23639/b6c6b938-2a4d-337a-b9fb-b923235f73fd.gif
class="required validate-alphanum" 是validation内建的校验规则名称。当执行new Validation('test', {immediate : true})，Field失去焦点或者执行表单提交动作时，该表单下的所有内建类校验名的校验规则将被触发。
页:
[1]