编写Jguery validatc表单验证插件

下面是一个简单的jQuery表单验证插件示例：

(function($) {
  $.fn.validateForm = function(options) {
  
    // 默认选项
    var settings = $.extend({
      requiredFields: [],  // 必填字段
      emailFields: [],     // Email字段
      phoneFields: [],     // 电话号码字段
    }, options);
    
    // 验证函数
    function validate(field, type) {
      var value = $.trim(field.val());
      switch (type) {
        case 'required':
          if (value.length === 0) {
            return false;
          }
          break;
        case 'email':
          var regex = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
          if (value.length > 0 && !regex.test(value)) {
            return false;
          }
          break;
        case 'phone':
          var regex = /^\d{7,}$/;
          if (value.length > 0 && !regex.test(value)) {
            return false;
          }
          break;
      }
      return true;
    }
    
    // 绑定表单提交事件
    this.on('submit', function() {
      var isValid = true;
      for (var i = 0; i < settings.requiredFields.length; i++) {
        var field = $(settings.requiredFields[i]);
        if (!validate(field, 'required')) {
          isValid = false;
          field.addClass('error');
        } else {
          field.removeClass('error');
        }
      }
      for (var i = 0; i < settings.emailFields.length; i++) {
        var field = $(settings.emailFields[i]);
        if (!validate(field, 'email')) {
          isValid = false;
          field.addClass('error');
        } else {
          field.removeClass('error');
        }
      }
      for (var i = 0; i < settings.phoneFields.length; i++) {
        var field = $(settings.phoneFields[i]);
        if (!validate(field, 'phone')) {
          isValid = false;
          field.addClass('error');
        } else {
          field.removeClass('error');
        }
      }
      return isValid;
    });
    
    return this;
  };
})(jQuery);

使用方法：

$('form').validateForm({
  requiredFields: ['#name', '#email'],
  emailFields: ['#email'],
  phoneFields: ['#phone']
});

此插件会验证必填字段、Email字段和电话号码字段，并在出错时添加一个`error`类到字段的容器上。在提交表单时，如果有任何一个字段验证失败，则不会提交表单。