自己写通用表单验证插件

最新推荐文章于 2025-08-14 10:35:44 发布

原创最新推荐文章于 2025-08-14 10:35:44 发布 · 642 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#表单验证 #JS插件 #Web

JS 专栏收录该内容

1 篇文章

订阅专栏

先看看效果图：

第一步：引入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.要验证的控件加属性，触发函数，如--onblur="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="请输入字典名称！"onblur="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" onblur="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>