基于prototype.js验证框架做表单校验- I.使用内建的校验规则

转载于 罗马集市

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