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

   
  
  

//        }  

   
  
  

//    });  

   
  
  
}); 
  
 
 

对于对象type为text ，textarea，password的input标签可以用的验证类型ValidateType为：Int，Float，Email；

如果需要自定义错误提示信息：可以给标签添加ErrorMsg属性

表单验证要求验证属于该表单的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"   。

 

本文出自 “Zero's Blog” 博客，请务必保留此出处http://zerosoft.blog.51cto.com/679447/856748