基于jquery的simpleValidate简易验证插件



// 一个简单的基于jQuery的表单验证插件示例
// 假设插件名为simpleValidate

(function($) {
    $.fn.simpleValidate = function(options) {
        var settings = $.extend({
            // 默认配置
            rules: {}, // 验证规则
            messages: {}, // 错误消息
            submitHandler: function() {} // 提交时的处理函数
        }, options);

        return this.each(function() {
            var $form = $(this);

            $form.on('submit', function(e) {
                e.preventDefault(); // 阻止表单默认提交行为

                var isValid = true;
                var errors = {};

                // 遍历验证规则
                $.each(settings.rules, function(fieldName, validators) {
                    var $input = $form.find('[name="' + fieldName + '"]');
                    var value = $input.val();

                    // 检查验证器是否通过
                    var isValidField = true;
                    $.each(validators, function(validatorName, validatorFunction) {
                        if (!validatorFunction(value)) {
                            isValidField = false;
                            errors[fieldName] = settings.messages[fieldName] || 'Invalid input';
                            return false; // 跳出循环
                        }
                    });

                    if (!isValidField) {
                        isValid = false;
                    }
                });

                // 如果有错误,显示错误消息
                if (!isValid) {
                    // 这里可以添加显示错误消息的逻辑
                    console.error(errors); // 示例:在控制台输出错误
                } else {
                    // 如果没有错误,执行提交处理函数
                    settings.submitHandler();
                }
            });
        });
    };

    // 示例验证函数
    $.simpleValidate.addMethod = function(name, method) {
        $.validator.addMethod(name, method);
    };

    // 添加一些示例验证方法(实际上这些方法需要jQuery Validate插件支持,但这里为了示例直接添加)
    $.simpleValidate.addMethod('required', function(value, element) {
        return $.trim(value).length > 0;
    });

    $.simpleValidate.addMethod('email', function(value, element) {
        return /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value);
    });
}(jQuery));

// 使用示例
$('#myForm').simpleValidate({
    rules: {
        username: ['required'],
        email: ['required', 'email']
    },
    messages: {
        username: 'Username is required',
        email: 'Please enter a valid email address'
    },
    submitHandler: function() {
        // 处理表单提交的逻辑
        alert('Form submitted successfully!');
    }
});

**注意**: 上述代码是一个简化的示例,实际上并没有完全实现一个独立的jQuery插件,因为它依赖于一些jQuery Validate插件的内部机制(如`$.validator.addMethod`),但这里为了说明如何构建一个简单的验证框架,我模拟了这些功能。在实际应用中,你可能需要整合或替换这些部分为真实的插件逻辑。此外,为了简洁起见,错误消息的显示逻辑并未在示例中完全实现,你可能需要根据自己的需求来添加相应的DOM操作和错误消息显示逻辑。