Prototype的验证框架

这个框架源于Andrew Tetlaw，见：http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype，修改于badqiu，见：http://badqiu.javaeye.com

如今我再次修改，以适合我自己项目的需要~

原来的框架是在每个验证控件的后面添加一个提示，但我们的项目是所有的提示都放在同一个地方~

这个框架被我改得乱七八糟了，也许不太适合。如果你有相同的需求，可以试一下这个东西。

使用方法和他们原来的差不多：

页面代码：

<table style=" 100%;">
    <tr>
        <td class="fim_l" colspan="4">
            <asp:Label ID="lblErr" runat="server" CssClass="com_errorInfo"></asp:Label>
        </td>
    </tr>
    <tr>
        <td style=" 120px;" class="fim_l">
            报表标题：
        </td>
        <td class="fim_r" colspan="3">
            <asp:TextBox ID="txbName" runat="server" MaxLength="100" Width="95%"></asp:TextBox><span
                class="com_errorInfo">*</span>
        </td>
    </tr>
    <tr>
        <td style=" 120px;" class="fim_l">
            考评周期：
        </td>
        <td class="fim_r">
            <asp:DropDownList ID="ddlSolution" runat="server" DataTextField="CycleDes" DataValueField="SolutionID"
                Width="180px">
            </asp:DropDownList>
            <span class="com_errorInfo">*</span>
        </td>
        <td style=" 120px;" class="fim_l">
            考评总分：
        </td>
        <td class="fim_r">
            <asp:Label ID="labTotalScore" runat="server" Text="Label"></asp:Label>分
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top;" class="fim_l">
            描述：
        </td>
        <td class="fim_r" colspan="3">
            <asp:TextBox ID="txbDes" runat="server" Rows="3" TextMode="MultiLine" Width="95%" maxLen="500" CssClass="textBox_wordBreak"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td style=" 120px;" class="fim_l">
            制表人：
        </td>
        <td class="fim_r" style=" 300px;">
            <asp:Label ID="lblCreator" runat="server"></asp:Label>
        </td>
        <td style=" 120px;" class="fim_l">
            制表时间：
        </td>
        <td class="fim_r">
            <asp:Label ID="lblCreateOn" runat="server"></asp:Label>
        </td>
    </tr>
</table>
<div id="divAlertScore" runat="server">
    <br />
    <table cellpadding="0" cellspacing="0" border="0" class="tab_sec_tb2">
        <tr>
            <td class="tab_sec_title2">
                区域考评评分预警
            </td>
        </tr>
        <tr>
            <td>
                <table class="tab_sec_tb2">
                    <tr>
                        <td class="fim_l" style=" 120px">
                            低分预警线：
                        </td>
                        <td class="fim_l">
                            <asp:TextBox ID="txtLowScore" runat="server" MaxLength="6" Width="40px" onKeyUp="refuseWithReg(this,/[^0-9.-]/i);"></asp:TextBox>分<span
                                class="com_errorInfo">*</span>
                        </td>
                        <td class="fim_l" style=" 120px">
                            高分预警线：
                        </td>
                        <td class="fim_l">
                            <asp:TextBox ID="txtHighScore" runat="server" MaxLength="6" Width="40px" onKeyUp="refuseWithReg(this,/[^0-9.-]/i);"></asp:TextBox>分<span
                                class="com_errorInfo">*</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" class="fim_l">
                            说明：当评分小于等于<b>低分预警线</b>、或大于等于<b>高分预警线</b>时，必须填写考评备注。
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div> 

检查JS：

function checkData(action) { 

    var valid = new Validation("divBaseInfo", { onSubmit: false, useTitles: false, immediate: false, stopOnFirst: true, validateAdvice: '<%=lblErr.ClientID %>' }); 

    $("<%=txbName.ClientID %>").addClassName("required max-length-100");
    $("<%=txbName.ClientID %>").setAttribute("advicePrefix", "标题");
    $("<%=ddlSolution.ClientID %>").addClassName("required");
    $("<%=ddlSolution.ClientID %>").setAttribute("advicePrefix", "考评周期");
    $("<%=txtLowScore.ClientID %>").addClassName("required validate-float-range-0-10000 float-digit-2");
    $("<%=txtLowScore.ClientID %>").setAttribute("advicePrefix", "低份预警线");
    $("<%=txtHighScore.ClientID %>").addClassName("required validate-float-range-0-10000 float-digit-2 great-than-<%=txtLowScore.ClientID %>");
    $("<%=txtHighScore.ClientID %>").setAttribute("advicePrefix", "高分预警线");
    $("<%=txbDes.ClientID %>").addClassName("max-length-500");
    $("<%=txbDes.ClientID %>").setAttribute("advicePrefix", "描述"); 

    if (document.getElementById("<%=gvRegionItem.ClientID %>") != null)
        if (document.getElementById("<%=gvRegionItem.ClientID %>").rows.length < 2) {
        document.getElementById("<%=lblErr.ClientID%>").innerText = "*没有区域考评规则，请添加";
        return false;
    } 

    if (valid.validate()) {
        valid.reset();
        subed = true;
        return true;
    } 

    return false;
} 

 

留意到这里：

var valid = new Validation("divBaseInfo", { onSubmit: false, useTitles: false, immediate: false, stopOnFirst: true, validateAdvice: '<%=lblErr.ClientID %>' });

divBaseInfo表示验证的区域，只验证此区域的控件

onSubmit: false, useTitles: false, immediate: false, stopOnFirst: true, 和原来的一样，后面添加了一个参数validateAdvice: '<%=lblErr.ClientID %>' 表示显示错误信息的控件ID。