自己写通用表单验证插件

来源：互联网发布：ipad淘宝hd不能横屏编辑：程序博客网时间：2024/06/06 08:51

先看看效果图：

第一步：引入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>

0 0