自己编写的表单验证插件

自己编写了一个表单验证插件,使用起来很简单,以后还可以扩展更多的功能,比如ajax验证。

思路借鉴了wojilu框架。每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空;rule表示验证规则,msg表示错误提示信息;to表示要验证的元素的name值,如果元素是单个的,to可以不写。该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息。

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

插件代码:

CSS:

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

JS:

/**
* 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");
    },

    //显示提示
    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();
});

如何使用:

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

<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>

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

<table class="table-test" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;">
    <tr>
        <td>
            <input name="c" value="" type="text" />
            <span class="valid nullable" rule="int" msg="可为空,请填写正整数"></span>
        </td>
    </tr>
    <tr>
        <td>
            <input name="d" value="" type="text" />
            <span class="valid" rule="number" msg="必填,请填写数字"></span>
        </td>
    </tr>
    <tr>
        <td>
            <select>
                <option value="-1">==请选择==</option>
                <option value="1">是</option>
                <option value="2">否</option>
            </select>
            <span class="valid" rule="^(?!-1$).+$" msg="必选"></span>
        </td>
    </tr>
    <tr>
        <td>
            <input name="a" value="1" type="checkbox" />
            <span>多</span>
            <input name="a" value="2" type="checkbox" />
            <span>少</span>
            <span class="valid" rule="" msg="必选" to="a"></span>
        </td>
    </tr>
    <tr>
        <td>
            <input name="b" value="1" type="radio" />
            <span>狗</span>
            <input name="b" value="2" type="radio" />
            <span>猫</span>
            <span class="valid" rule="" msg="必选" to="b"></span>
        </td>
    </tr>
    <tr>
        <td>
            <textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea>
            <span class="valid nullable" rule="^(.|\n){5,100}$" msg="可为空,长度必须大于等于5小于等于100"></span>
        </td>
    </tr>
</table>

3、执行验证JS代码:

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

效果图:

时间: 2024-10-29 19:08:54

自己编写的表单验证插件的相关文章

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

表单验证插件之jquery.validate.js

提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery表单验证插件jQuery.validate.js</title> <sty

(转)强大的JQuery表单验证插件 FormValidator使用介绍

jQuery formValidator表单验证插件是客户端表单验证插件.在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人资料,录入一些常规数据等等.在这之前,页面开发者(JavaScript开发者)需要编写大量的JavaScript来进行表单元素的校验,而这些校验在平时开发中不停的重复书写.常见的校验如不能为空,必须满足长度要求,必须为数字,必须为Email等等.一般要判断的表单元素比较多,开发过程就显得枯燥无味--重复的代码不断重复,而且可能还要兼容多种浏览器,更多

JavaScript之jQuery-7 jQuery 使用插件(使用插件、日历插件、表单验证插件)

一.jQuery 使用插件 插件的查找与帮助 - jQuery 官方网站的插件库(http://plugins.jquery.com) 提供了大量的插件.并给出去了每个插件的用户评级.版本及bug等 - 库中列出了每个插件的ZIP文件下载.演示.示例代码及教程 使用插件 - step 1:将插件包导入到页面中,并确保它在jQuery源文件之后 <script src="jqeury-1.11.1.js"></script> <script></

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

jQuery插件 -- 表单验证插件jquery.validate.js

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jquery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

bootstrapValidator表单验证插件

bootstrapValidator——一个很好用的表单验证插件,再也不用手写验证规则啦! bootstrapValidator官方文档:http://bootstrapvalidator.votintsev.ru/api/ 一.举个丽子: 写了一个小例子 先来看一下效果吧! 预览效果 查看源码 二.具体实现步骤如下: 1.下载jquery.bootstrap.bootstrapValidator bootstrapValidator下载地址: https://github.com/nghuup

好用的表单验证插件

在做项目过程中,使用了jquery的一个验证表单的插件--jquery validation.这里简单整理了一下这个强大的表单验证插件的一些常用的方法,以及在使用过程中需要注意的地方. 首先要想使用,首先需要引入jquery,然后引入jquery validation两个文件.然后通过插件的初始化方法,进行初始化,之后就可以按照自己的需要进行使用了. //引入jquery,版本1.6+ <script type="text/javascript" src="http:/

【jQuery基础学习】06 jQuery表单验证插件-Validation

jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script