簡單的表單驗證插件（Jquery）

在作web開發的時候常常遇到表單驗證問題，表單驗證通常有客戶端驗證和服務器端驗證，這個驗證插件僅僅能知足個人項目中的基本需求的。

    Validate_Tools.js

function Validate_Text(obj){
    return $.trim(obj.value) != "";
}

function Validate_Select(obj){
    return $.trim(obj.value) != "";
}

function Validate_List(obj){
    var flag = false;
                    
    $(obj).find("input").each(function(){
        if(this.checked){
            flag = true;
            return false;
        }
    });

    return flag;
}

function Validate_Expression(objValue, reg){
    return $.trim(objValue) == "" ? false : new RegExp(reg).test(objValue);
}

function Validate_Obj(obj) {
    var flag = false;
    var errorMsg = "";
    var objType = $(obj).attr("type");
    var objTitle = $(obj).parent(0).prev().text().replace("：", "").replace(":", "");

    try{
        if(objType == "text" || objType == "textarea" || objType == "password"){
            var validateType = $(obj).attr("ValidateType");
            switch (validateType){
                case "Int":
                    flag = Validate_Expression(obj.value, "^[0-9]*$");
                    if (!flag) {
                        if ($.trim(obj.value) == "") {
                            errorMsg = objTitle + "不能爲空！";
                        }
                        else {
                            errorMsg = objTitle + "格式有誤，請填寫正確的格式！";
                        }
                    }
                    break;
                case "Float":
                    flag = Validate_Expression(obj.value, "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
                    if (!flag) {
                        if ($.trim(obj.value) == "") {
                            errorMsg = objTitle + "不能爲空！";
                        }
                        else {
                            errorMsg = objTitle + "格式有誤，請填寫正確的格式！";
                        }
                    }
                    break;
                case "Email":
                    flag = Validate_Expression(obj.value, "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$");
                    if (!flag) {
                        if ($.trim(obj.value) == "") {
                            errorMsg = objTitle + "不能爲空！";
                        }
                        else {
                            errorMsg = objTitle + "格式有誤，請填寫正確的郵件格式！";
                        }
                    }
                    break;
                default:
                    var regularExpression = $(obj).attr("ValidateExpression");
                    if (regularExpression != undefined && regularExpression != "") {
                        flag = Validate_Expression(obj.value, regularExpression);
                        if (!flag) {
                            if ($.trim(obj.value) == "") {
                                errorMsg = objTitle + "不能爲空！";
                            }
                            else {
                                errorMsg = objTitle + "格式有誤！";
                            }
                        }
                    }
                    else {
                        flag = Validate_Text(obj);
                        if (!flag) {
                            errorMsg = objTitle + "不能爲空！";
                        }
                    }
                    break;
            }
        }
        else if(objType == "select-one"){
            flag = Validate_Select(obj);
            if (!flag) { 
                errorMsg = "請選擇" + objTitle + "！";
            }
        }
        else if(objType == "file"){
            flag = Validate_Text(obj);
            if (!flag) {
                errorMsg = "請選擇上傳文件" + objTitle + "！";
            }
        }
        else{
            flag = Validate_List(obj);
            if (!flag) {
                errorMsg = "請選擇" + objTitle + "！";
            }
        }
        
        if(!flag){
            if($(obj).attr("ErrorMsg") != undefined && $(obj).attr("ErrorMsg") != ""){
                errorMsg = $(obj).attr("ErrorMsg");
            }
            
            alert(errorMsg);
            try{
                obj.focus();
            }
            catch(e){
            }
            return flag;
        }
    }
    catch(e){
        alert(e.description);
        flag = false;
        return flag;
    }
    
    return flag;
}

function Validate_Form(){
    var flag = true;

    try {
        $("*[ValidateType]").each(function () {
            flag = Validate_Obj(this);

            if (!flag) {
                return flag;
            }
        });
    }
    catch (e) {
        alert(e.description);
        flag = false;
    }
    
    return flag;
}

function Validate_Group(group) {
    var flag = true;

    try {
        $("*[ValidateGroup]").each(function () {
            if ($(this).attr("type") != "submit") {
                if ($(this).attr("ValidateGroup") == group) {
                    flag = Validate_Obj(this);

                    if (!flag) {
                        return flag;
                    }
                }
            }
        });
    }
    catch (e) {
        alert(e.description);
        flag = false;
    }

    return flag;
}

$(function () {
    $("input[type='submit']").each(function () {
        if ($(this).attr("ValidateGroup") != undefined && $(this).attr("ValidateGroup") != "") {
            $(this).click(function () {
                return Validate_Group($(this).attr("ValidateGroup"));
            });
        }
    });
    //添加必填提示
    $("*[ValidateType]").each(function () {
        if ($(this).attr("type") != "submit") {
            $(this).parent(0).append("<span style='color:red'>*</span>");
        }
    });
});

View Code

 

 

注：

1. 對於對象type爲text ，textarea，password的input標籤能夠用的驗證類型ValidateType爲：Int，Float，Email；
2. 若是須要自定義錯誤提示信息：能夠給標籤添加ErrorMsg屬性
3. 表單驗證要求驗證屬於該表單的HTML標籤，給屬於同一個表單的標籤添加ValidateGroup屬性，submit按鈕也須要添加ValidateGroup，要求同一表單中的input標籤和submit 按鈕的ValidateGroup屬性值相同

 

 

用法以下面的代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductQuotationEdit.aspx.cs" Inherits="Trade.Web.Product.ProductQuotationEdit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>供應商報價</title>
    <link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../Styles/AutoComplete/jquery.autocomplete.css" type="text/css" />
    <script type="text/javascript" src="../Scripts/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../Scripts/Validate/Validate_Tools.js"></script>
    <script src="../Scripts/AutoComplete/jquery.autocomplete.min.js" type="text/javascript"></script>
    <script type="text/javascript">         function returnValue() { try { parent.closeDiv(); } catch (e) { alert(e.message); } }      </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table class="table_edit">
                <tr>
                    <th>供應商:                  </th>
                    <td>
                        <asp:TextBox ID="ID" runat="server" Visible="false"></asp:TextBox>
                        <asp:TextBox ID="ProductID" runat="server" Visible="false"></asp:TextBox>
                    </td>
                    <th>報價日期:                  </th>
                    <td>
                        <asp:TextBox ID="QuotationDate" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>供應商貨號:                  </th>
                    <td>
                        <asp:TextBox ID="SupplierItemNo" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:TextBox>
                    </td>
                    <th>幣種:                  </th>
                    <td>
                        <asp:DropDownList ID="Currency" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <th>單價:                  </th>
                    <td>
                        <asp:TextBox ID="Price" runat="server" ValidateGroup="Supplier" ValidateType="Float"></asp:TextBox>
                    </td>
                    <th>起訂量:                  </th>
                    <td>
                        <asp:TextBox ID="MiniOrderQty" runat="server" ValidateGroup="Supplier" ValidateType="Int"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <th>是否開票:                  </th>
                    <td>
                        <asp:DropDownList ID="IsBilling" runat="server" ValidateGroup="Supplier" ValidateType="Text">
                            <asp:ListItem Text="是" Value="1"></asp:ListItem>
                            <asp:ListItem Text="否" Value="0"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                    <th>是否含稅:                  </th>
                    <td>
                        <asp:DropDownList ID="IsTax" runat="server" ValidateGroup="Supplier" ValidateType="Text">
                            <asp:ListItem Text="是" Value="1"></asp:ListItem>
                            <asp:ListItem Text="否" Value="0"></asp:ListItem>
                        </asp:DropDownList>
                    </td>
                </tr>
                <tr>
                    <th>備註:                  </th>
                    <td colspan="3">
                        <asp:TextBox ID="Remark" runat="server" TextMode="MultiLine"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <asp:Button ID="btnSave" runat="server" Text="保 存" ValidateGroup="Supplier" OnClick="btnSave_Click" />
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

View Code

 

注：因爲jquery1.4.4能夠取得select標籤的type屬性爲"select-one"，

可是jquery1.7.1版本獲取不到select標籤的type屬性，因此能夠給select添加type="select-one"   。