自己编排了一个表单验证插件,使用起来很粗略,以后还可扩展更多之功力,比如ajax验证。

   
每个需要证明的表单元素下面来一个span标签,这个标签的class有一个valid表示需验证,如果来nullable则代表只是为空;rule代表验证规则,msg代表错误提示信息;to表示如证明的因素的name值,如果元素是单个的,to可以无写。该插件会遍历每个有valid的span标签,找有它前面需要征的要素,根据rule验证,如果证实不经,则展示边框为红,鼠标在元素上常显示错误信息。

   
验证时:1、点击提交按钮时显式调用验证办法;2、当元素触发blur时验证。

插件代码:

CSS:

jQuery 1jQuery 2

.failvalid
{
    border: solid 2px red !important;
}

View Code

JS:

jQuery 3jQuery 4

/**
* 2014年12月22日
* 验证插件
*/

SimpoValidate = {
    //验证规则
    rules: {
        int: /^[1-9]\d*$/,
        number: /^[+-]?\d*\.?\d+$/
    },

    //初始化
    init: function () {
        $("span[class*='valid']").each(function () { //遍历span
            var validSpan = $(this);
            var to = validSpan.attr("to");
            var target;
            if (to) {
                target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
            } else {
                var target = validSpan.prev();
            }
            if (target) {
                target.blur(function () {
                    SimpoValidate.validOne(target, validSpan);
                });
            }
        });
    },

    //验证全部,验证成功返回true
    valid: function () {
        var bl = true;

        $("span[class*='valid']").each(function () { //遍历span
            var validSpan = $(this);
            var to = validSpan.attr("to");
            var target;
            if (to) {
                target = $("input[name='" + to + "'],select[name='" + to + "'],textarea[name='" + to + "']");
            } else {
                target = validSpan.prev();
            }
            if (target) {
                if (!SimpoValidate.validOne(target, validSpan)) {
                    bl = false;
                }
            }
        });

        return bl;
    },

    //单个验证,验证成功返回true
    validOne: function (target, validSpan) {
        SimpoValidate.removehilight(target, msg);

        var rule = SimpoValidate.getRule(validSpan);
        var msg = validSpan.attr("msg");
        var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可为空
        var to = validSpan.attr("to");

        if (target) {
            //checkbox或radio
            if (target[0].tagName.toLowerCase() == "input" && target.attr("type") && (target.attr("type").toLowerCase() == "checkbox" || target.attr("type").toLowerCase() == "radio")) {
                var checkedInput = $("input[name='" + to + "']:checked");
                if (!nullable) {
                    if (checkedInput.length == 0) {
                        SimpoValidate.hilight(target, msg);
                        return false;
                    }
                }
            }

            //input或select
            if (target[0].tagName.toLowerCase() == "input" || target[0].tagName.toLowerCase() == "select") {
                var val = target.val();
                if (!nullable) {
                    if ($.trim(val) == "") {
                        SimpoValidate.hilight(target, msg);
                        return false;
                    }
                }
                else {
                    if ($.trim(val) == "") {
                        SimpoValidate.removehilight(target, msg);
                        return true;
                    }
                }

                if (rule) {
                    var reg = new RegExp(rule);
                    if (!reg.test(val)) {
                        SimpoValidate.hilight(target, msg);
                        return false;
                    }
                }
            }
            else if (target[0].tagName.toLowerCase() == "textarea") {
                var val = target.text();
                if (!nullable) {
                    if ($.trim(val) == "") {
                        SimpoValidate.hilight(target, msg);
                        return false;
                    }
                }
                else {
                    if ($.trim(val) == "") {
                        SimpoValidate.removehilight(target, msg);
                        return true;
                    }
                }

                if (rule) {
                    var reg = new RegExp(rule);
                    if (!reg.test(val)) {
                        SimpoValidate.hilight(target, msg);
                        return false;
                    }
                }
            }
        }

        return true;
    },

    //获取验证规则
    getRule: function (validSpan) {
        var rule = validSpan.attr("rule");
        switch ($.trim(rule)) {
            case "int":
                return this.rules.int;
            case "number":
                return this.rules.number;
            default:
                return rule;
                break;
        }
    },

    //红边框及错误提示
    hilight: function (target, msg) {
        target.addClass("failvalid");
        target.bind("mouseover", function (e) {
            SimpoValidate.tips(target, msg, e);
        });
        target.bind("mouseout", function () {
            SimpoValidate.removetips();
        });
    },

    //取消红边框及错误提示
    removehilight: function (target) {
        target.unbind("mouseover");
        target.unbind("mouseout");
        target.removeClass("failvalid");
        SimpoValidate.removetips();
    },

    //显示提示
    tips: function (target, text, e) {
        var divtipsstyle = "position: absolute; left: 0; top: 0; background-color: #dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height:20px; ";
        $("body").append("<div class='div-tips' style='" + divtipsstyle + "'>" + text + "</div>");

        var divtips = $(".div-tips");
        divtips.css("visibility", "visible");

        var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
        var left = e.clientX;
        divtips.css("top", top);
        divtips.css("left", left);

        $(target).mousemove(function (e) {
            var top = e.clientY + $(window).scrollTop() - divtips.height() - 18;
            var left = e.clientX;
            divtips.css("top", top);
            divtips.css("left", left);
        });
    },

    //移除提示
    removetips: function () {
        $(".div-tips").remove();
    }
};

$(function () {
    SimpoValidate.init();
});

View Code

哪用:

1、引用CSS和JS(必须引用jQuery):

jQuery 5jQuery 6

<link type="text/css" href="~/Scripts/SimpoValidate.css" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/Scripts/ValidateUtil.js"></script>

View Code

2、表单HTML代码(部分代码):

jQuery 7jQuery 8

<table class="table-test" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
    <tr>
        <td>
            <input name="c" value="" type="text" />

        </td>
    </tr>
    <tr>
        <td>
            <input name="d" value="" type="text" />

        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="-1">==请选择==</option>
                <option value="1">是</option>
                <option value="2">否</option>
            </select>

        </td>
    </tr>
    <tr>
        <td>
            <input name="a" value="1" type="checkbox" />
            多
            <input name="a" value="2" type="checkbox" />
            少

        </td>
    </tr>
    <tr>
        <td>
            <input name="b" value="1" type="radio" />
            狗
            <input name="b" value="2" type="radio" />
            猫

        </td>
    </tr>
    <tr>
        <td>
            <textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea>

        </td>
    </tr>
</table>

View Code

3、执行验证JS代码:

jQuery 9jQuery 10

//保存数据
function save() {
    if (SimpoValidate.valid()) { //执行验证
        $("#frm").submit(); //提交表单
    }
}

View Code

 效果图:

jQuery 11

 

相关文章

网站地图xml地图