简单的表单验证插件（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>");
        }
    });
});

 

 

注：

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>

 

注：由于jquery1.4.4可以取得select标签的type属性为"select-one"，

但是jquery1.7.1版本获取不到select标签的type属性，所以可以给select添加type="select-one"   。