自己寫通用表單驗證插件

先看看效果圖：

第一步：引入verify.js文件：

var reg_nonNull = /.+/;//非空
var reg_email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//郵箱
var reg_phone = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;//電話號碼
var reg_mobile = /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;//手機號碼
var reg_url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;//url地址
var reg_idCard = "this.IsIdCard(value)";//身份證號碼
var reg_qq = /^[1-9]\d{4,8}$/;//qq號碼
var reg_integer = /^[-\+]?\d+$/;//整數
var reg_doubleNum = /^[-\+]?\d+(\.\d+)?$/;//浮點數
var reg_english = /^[A-Za-z]+$/;//英文字母
var reg_chinese = /^[\u0391 - \uFFE5] + $ /;//中文
var reg_username = /^[a-z]\w{3,}$/i;//用戶名
var reg_unSafe = /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/;//不安全字符

//驗證表單
function Verify(obj) {
    //驗證標示
    var flag = true;
    //驗證類型
    var type = $(obj).attr("verify");
    //錯誤提示信息
    var msg = $(obj).attr("msg");

    //獲取當前網址，如： http://localhost:8080/ems/Pages/Basic/Person.jsp
    var curWwwPath = window.document.location.href;
    //獲取主機地址之後的目錄，如： /ems/Pages/Basic/Person.jsp
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    //獲取主機地址，如： http://localhost:8080
    var localhostPath = curWwwPath.substring(0, pos);
    var right_path = localhostPath + "/images/right.png";
    var error_path = localhostPath + "/images/error.png";

    switch (type) {
        case "nonNull":
            if (!reg_nonNull.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "email":
            if (!reg_email.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "phone":
            if (!reg_phone.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "mobile":
            if (!reg_mobile.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "url":
            if (!reg_url.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "idCard":
            if (!reg_idCard.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "qq":
            if (!reg_qq.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "integer":
            if (!reg_integer.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "doubleNum":
            if (!reg_doubleNum.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;;
        case "english":
            if (!reg_english.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "chinese":
            if (!reg_chinese.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "username":
            if (!reg_username.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
        case "unSafe":
            if (!reg_unSafe.test($(obj).val())) {
                $(obj).parent().find(".error_msg").html("<img src='" + error_path + "' />" + msg);
                flag = false;
            } else {
                $(obj).parent().find(".error_msg").html("<img src='" + right_path + "' />");
            }
            break;
    }
    return flag;
}
//提交表單
$(document).ready(function () {
    $(".btn_verify").click(function () {
        var flag = true;
        $(".verify_from").find(".verify").each(function () {
            if (!Verify($(this))) {
                flag = false;
            }
        });
        return flag;
    });
});

 如果一個頁面多個表單，解決方案如下，只需改一處代碼

//提交表單
$(document).ready(function () {
    $(".btn_verify").click(function () {
        var flag = true;
        $(".verify_from").eq($(".btn_verify").index(this)).find(".verify").each(function () {
            if (!Verify($(this))) {
                flag = false;
            }
        });
        return flag;
    });
});

 

 

第二步：來看html:

用法 ：

1.表單或div引用類名--verify_from

2.要驗證控件引用類名--verify

3.要驗證的控件加屬性，驗證類型，如驗證非空--verify="nonNull"

4.要驗證的控件加屬性，錯誤提示信息，如--msg="請輸入字典名稱！"

5.要驗證的控件加屬性，觸發函數，如--οnblur="Verify(this)"

6.提交按鈕引用類名來提交驗證，如--btn_verify

OK,現在可以實現驗證了，示例代碼如下：

 

<table class="table_from w500 verify_from">
                        <tr>
                            <td class="td_tit w60">字典名稱</td>
                            <td>
                                <asp:TextBox ID="tb_Name" CssClass="form-control verify" verify="nonNull"msg="請輸入字典名稱！"οnblur="Verify(this)"runat="server"></asp:TextBox>
                                <span class="error_msg c00"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_tit">字典編碼</td>
                            <td>
                                <asp:TextBox ID="tb_Number" CssClass="form-controlverify"verify="integer" msg="字典編碼只能是數字！"runat="server" οnblur="Verify(this)"></asp:TextBox>
                                <span class="error_msg c00"></span>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_tit">字典描述</td>
                            <td>
                                <asp:TextBox ID="tb_Content" CssClass="form-control" runat="server" TextMode="MultiLine"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td class="td_tit">字典狀態</td>
                            <td>
                                <asp:RadioButton ID="rb_Status1" runat="server" Text="啓用" GroupName="status" Checked="True" />  
                                <asp:RadioButton ID="rb_Status0" runat="server" Text="禁用" GroupName="status" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btn_Save" runat="server" Text="保存"  CssClass="btn btn-primarybtn_verify" OnClick="btn_Save_Click" />
                    <input type="button" id="btn_close" class="btn btn-default" data-dismiss="modal" value="關閉" />
                </div>