fValidator 實際驗證畫面

如今，每個人都知道，JavaScript可以被用來驗證輸入資料的HTML表單中的內容發送到服務器之前。儘管，有很多表單中的字段時，在 JavaScript 驗證變得太複雜，枯燥的代碼。這就是為什麼 fValidator 出現的原因。

使用方法：
首先載入必須的 JavaScript 程式碼片段
//載入 MooTools 框架
<script type="text/javascript" src="js/mootools.js"></script>
//載入 fValidator 程式主體
<script type="text/javascript" src="js/fValidator.js"></script>


再來編輯HTML的片段
<form id="exA" class="fValidator-form" method="post" action="#">
    <fieldset>
        <legend>fValidator</legend>
        <table>
            <tfoot>
                <tr>
                    <td colspan="2"><input id="exA_submit" type="submit" value="submit" /><input type="reset" value="reset" /></td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td><label for="exA_Id">ID:</label></td>
                    <td><input id="exA_Id" class="fValidate['required']" name="id" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="exA_Password">Password:</label></td>
                    <td><input id="exA_Password" class="fValidate['required']" name="password" type="password" /></td>
                </tr>
                <tr>
                    <td><label for="exA_cPassword">Confirm password:</label></td>
                    <td><input id="exA_cPassword" class="fValidate['required','=exA_Password']" name="cpassword" type="password" /></td>
                </tr>
                <tr>
                    <td><label for="exA_Name">Name:</label></td>
                    <td><input id="exA_Name" class="fValidate['required','alpha']" name="name" type="text" /></td>
                </tr>
                <tr>
                    <td>Sex:</td>
                    <td>
                        <label for="exA_Sex_male">male</label><input id="exA_Sex_male" name="sex" type="radio" value="male" />
                        <label for="exA_Sex_female">female</label><input id="exA_Sex_female" class="fValidate['required']" name="sex" type="radio" value="female" />
                    </td>
                </tr>
                <tr>
                    <td><label for="exA_Date">Birthday:</label></td>
                    <td><input id="exA_Date" class="fValidate['date']" name="date" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="exA_Phone">Phone:</label></td>
                    <td><input id="exA_Phone" class="fValidate['required','phone']" name="phone" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="exA_Phone2">Phone 2:</label></td>
                    <td><input id="exA_Phone2" class="fValidate['phone']" name="phone2" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="exA_Email">Email:</label></td>
                    <td><input id="exA_Email" class="fValidate['required','email']" name="email" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="exA_Url">URL:</label></td>
                    <td><input id="exA_Url" class="fValidate['required','url']" name="url" type="text" /></td>
                </tr>
                <tr>
                    <td><label for="exA_State">State:</label></td>
                    <td><select id="exA_State" class="fValidate['required']" name="state">
                        <option value="">Select one...</option>
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                    </select></td>
                </tr>
                <tr>
                    <td><label for="exA_Number">Real (float):</label></td>
                    <td><input id="exA_Number" class="fValidate['required','real']" name="number" type="text" /></td>
                </tr>
            </tbody>
        </table>
    </fieldset>
</form>

最後加上一個 JavaScript 的片段就完成了
window.addEvent("domready", function() {
    var exValidatorA = new fValidator("exA");
});


附上Class可驗證的參數部分

屬性	說明
required	驗證是否為空白
alpha	驗証英文字符.使用正則表達式
alphanum	驗証數字字符.使用正則表達式
integer	驗證是否為數字
date	驗證是否為日期
email	驗證是否為信箱
phone	驗證是否為電話
url	驗證是否為網址

作者網站：http://zendold.lojcomm.com.br/fvalidator
檔案大小：3.77 KB
檔案下載：http://zendold.lojcomm.com.br/fvalidator/js/fValidator.js
檔案備份：下載