jquery插件制作 表单验证实现代码

下面我来为你详细讲解“jQuery插件制作——表单验证实现代码”的完整攻略。

1. jQuery插件制作概述

在jQuery中，插件是一种可扩展UI组件，它是基于jQuery编写的，提供了一些常用的功能，如导航菜单、幻灯片、表单验证等等。通过制作jQuery插件，我们可以将这些常用的UI组件封装起来，提高代码复用率，同时也可以方便地实现功能的扩展和定制。

2. 制作表单验证插件

制作表单验证插件的基本流程如下：

2.1 编写插件模板

(function($) {

    $.fn.validateForm = function(options) {

        // 默认配置项
        var settings = $.extend({
            // 配置项内容
            // ...
        }, options);

        // 插件代码

    };
})(jQuery);

2.2 解析参数

// 默认配置项
var settings = $.extend({
    errorClass: 'error',
    required: [],
    minLength: {},
    maxLength: {}
}, options);

2.3 插件代码

// 循环每个表单元素
this.each(function() {
    var $form = $(this);
    // 绑定表单提交事件
    $form.on('submit', function() {
        // 表单验证逻辑
        // ...
        return false;
    });
});

2.4 实现表单验证

// 验证必填项
if ($.inArray(field, settings.required) !== -1) {
    if ($input.val() === '') {
        $input.addClass(settings.errorClass);
        return;
    }
}

// 验证最小长度
if (settings.minLength.hasOwnProperty(field)) {
    var minLength = settings.minLength[field];
    if ($input.val().length < minLength) {
        $input.addClass(settings.errorClass);
        return;
    }
}

// 验证最大长度
if (settings.maxLength.hasOwnProperty(field)) {
    var maxLength = settings.maxLength[field];
    if ($input.val().length > maxLength) {
        $input.addClass(settings.errorClass);
        return;
    }
}

3. 示范案例

下面是两个示例，展示如何通过jQuery插件制作实现表单验证的功能。

3.1 示例一：表单验证插件

(function($) {

    $.fn.validateForm = function(options) {

        // 默认配置项
        var settings = $.extend({
            errorClass: 'error',
            required: [],
            minLength: {},
            maxLength: {}
        }, options);

        // 循环每个表单元素
        this.each(function() {
            var $form = $(this);

            // 绑定表单提交事件
            $form.on('submit', function() {
                var isError = false;

                // 循环每个表单元素
                $form.find('input[type!=submit], select, textarea').each(function() {
                    var $input = $(this);
                    var field = $input.attr('name');

                    // 验证必填项
                    if ($.inArray(field, settings.required) !== -1) {
                        if ($input.val() === '') {
                            $input.addClass(settings.errorClass);
                            isError = true;
                            return;
                        }
                    }

                    // 验证最小长度
                    if (settings.minLength.hasOwnProperty(field)) {
                        var minLength = settings.minLength[field];
                        if ($input.val().length < minLength) {
                            $input.addClass(settings.errorClass);
                            isError = true;
                            return;
                        }
                    }

                    // 验证最大长度
                    if (settings.maxLength.hasOwnProperty(field)) {
                        var maxLength = settings.maxLength[field];
                        if ($input.val().length > maxLength) {
                            $input.addClass(settings.errorClass);
                            isError = true;
                            return;
                        }
                    }
                });

                if (isError) {
                    return false;
                }
            });
        });

    };
})(jQuery);

3.2 示例二：使用表单验证插件

<form id="myForm">
    <div>
        <label for="name">姓名：</label>
        <input type="text" name="name" maxLength="10" required />
    </div>

    <div>
        <label for="email">邮箱：</label>
        <input type="email" name="email" required />
    </div>

    <div>
        <label for="mobile">手机：</label>
        <input type="tel" name="mobile" pattern="^1[3456789]\d{9}$" required />
    </div>

    <div>
        <label for="gender">性别：</label>
        <select name="gender" required>
            <option value="">请选择</option>
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
    </div>

    <button type="submit">提交</button>
</form>

<script>
$(function() {
    $('#myForm').validateForm({
        required: ['name', 'email', 'mobile', 'gender'],
        minLength: { name: 2 },
        maxLength: { name: 10 }
    });
});
</script>

以上就是制作表单验证插件的完整攻略，希望能对你有所帮助。