jquery插件制作 -- 3.表单验证

  今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是,当表单提交的时候检查必填项是否正确填写,同时根据需要验证输入信息是否符合规范。

  先下页面代码:

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="Scripts/jquery-1.8.0.min.js"></script>

    <script type="text/javascript" src="Scripts/jquery.formCheck.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('.formToCheck').formCheck();

        });

    </script>

    <style type="text/css">

        form

        {

            width: 300px;

        }

        label

        {

            position: absolute;

        }

        input:not(.submit), textarea

        {

            margin-left: 100px;

            width: 200px;

        }

        .submit

        {

            margin-left: 100px;

        }

        .error

        {

            border:1px solid red;

        }

    </style>

</head>

<body>

    <form class="formToCheck" id="formToCheck" method="get" action="#">

    <fieldset>

        <legend>a simple form</legend>

        <p>

            <label for="fname">

                * first name</label>

            <input id="fname" class="required" name="fname"  />

        </p>

        <p>

            <label for="lname">

                last name</label>

            <input id="lname" name="lname" />

        </p>

        <p>

            <label for="email">

                * email</label>

            <input id="email" name="email" class="required email" />

        </p>

        <p>

            <label for="comment">

                * comment</label>

            <input id="comment" name="comment" class="required" />

        </p>

        <p>

            <label for="email">

                * email</label>

            <input id="submit" type="submit" class="submit" value="submit" />

        </p>

    </fieldset>

    </form>

</body>

</html>
复制代码

 

  我们定义了一个form,定义了几个输入框,请注意class属性,有的是class="required",说明该项是必填项;class="required email"说明该项是必填项,并且需要符合email格式。没有定义class的输入框不做验证。下面来看插件代码:

复制代码
(function ($) {

    $.fn.formCheck = function (options) {

        var defaults = {

            errorClass: 'error'

        };

        var options = $.extend(defaults, options);



        return this.each(function () {

            var form = $(this);

            //如果不是from表单,直接返回不做任何操作

            if (!form.is('form')) {

                return;

            }

            //只有当form表单提交的时候,我们才做验证

            form.submit(function () {

                var errorFlag = false;



                //获取表单里面所有的input控件,逐一进行处理

                $(':input', this).each(function (index, item) {

                    //获取当前对象

                    var element = $(item);

                    //移除样式

                    element.removeClass(options.errorClass);



                    //必填项验证,value值不能为空

                    if (element.hasClass('required') && element.val().length == 0) {

                        errorFlag = true;

                        element.addClass(options.errorClass);

                    }

                    //数字验证

                    if (element.hasClass('number') && element.val().length > 0 && !/^\d+$/.test(element.val())) {

                        errorFlag = true;

                        element.addClass(options.errorClass);

                    }

                    //email验证

                    if (element.hasClass('email') && element.val().length > 0 
                && !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(element.val())) { errorFlag = true; element.addClass(options.errorClass); } //验证数字长度 var num = this.className.match(/min(\d+)/i); if (num && element.val().length < num[1]) { errorFlag = true; element.addClass(options.errorClass); } }); return !errorFlag; }); }); }; })(jQuery);
复制代码

 

  demo下载地址:jQuery.plugin.formcheck.zip

  今天的课程就到此为止了。

你可能感兴趣的:(jquery插件)