基于prototype.js验证框架(validation.js)做表单校验

koda

有一个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按钮时，将看到错误信息提示。 class="required validate-alphanum" 是validation内建的校验规则名称。当执行new Validation('test', {immediate : true})，Field失去焦点或者执行表单提交动作时，该表单下的所有内建类校验名的校验规则将被触发。