基于prototype.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失去焦点或者执行表单提交动作时，该表单下的所有内建类校验名的校验规则将被触发。