编写基千Jquery的表 单验证插件

好的，下面是一个简单的基于jQuery的表单验证插件：

(function($) {
  $.fn.formValidator = function(options) {
    var settings = $.extend({
      required: [],
      email: [],
      phone: [],
      minlength: [],
      maxlength: [],
      number: [],
      equalTo: []
    }, options);

    return this.each(function() {
      var $form = $(this);
      $form.on('submit', function(event) {
        var isValid = true;
        $.each(settings.required, function(index, field) {
          var $input = $form.find('[name="' + field + '"]');
          var val = $input.val();
          if (!val) {
            $input.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
          }
        });
        $.each(settings.email, function(index, field) {
          var $input = $form.find('[name="' + field + '"]');
          var val = $input.val();
          if (val && !isValidEmail(val)) {
            $input.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
          }
        });
        $.each(settings.phone, function(index, field) {
          var $input = $form.find('[name="' + field + '"]');
          var val = $input.val();
          if (val && !isValidPhone(val)) {
            $input.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
          }
        });
        $.each(settings.minlength, function(index, field) {
          var $input = $form.find('[name="' + field.name + '"]');
          var val = $input.val();
          if (val.length < field.length) {
            $input.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
          }
        });
        $.each(settings.maxlength, function(index, field) {
          var $input = $form.find('[name="' + field.name + '"]');
          var val = $input.val();
          if (val.length > field.length) {
            $input.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
          }
        });
        $.each(settings.number, function(index, field) {
          var $input = $form.find('[name="' + field + '"]');
          var val = $input.val();
          if (val && isNaN(val)) {
            $input.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
          }
        });
        $.each(settings.equalTo, function(index, field) {
          var $input = $form.find('[name="' + field.name + '"]');
          var $equalTo = $form.find('[name="' + field.equalTo + '"]');
          var val = $input.val();
          var equalToVal = $equalTo.val();
          if (val !== equalToVal) {
            $input.addClass('error');
            $equalTo.addClass('error');
            isValid = false;
          } else {
            $input.removeClass('error');
            $equalTo.removeClass('error');
          }
        });
        if (!isValid) {
          event.preventDefault();
        }
      });
    });

    function isValidEmail(email) {
      var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      return emailRegex.test(email);
    }

    function isValidPhone(phone) {
      var phoneRegex = /^\d{10}$/;
      return phoneRegex.test(phone);
    }
  };
})(jQuery);

这个插件支持以下验证规则：

- required：必填字段
- email：电子邮件格式
- phone：手机号格式
- minlength：最小长度限制
- maxlength：最大长度限制
- number：数字格式
- equalTo：两个字段的值必须相等

使用方法：

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" name="name" required>

  <label for="email">Email:</label>
  <input type="email" name="email" required>

  <label for="phone">Phone:</label>
  <input type="text" name="phone" required>

  <label for="password">Password:</label>
  <input type="password" name="password" minlength="8" maxlength="20" required>

  <label for="confirmPassword">Confirm Password:</label>
  <input type="password" name="confirmPassword" equalTo="password" required>

  <button type="submit">Submit</button>
</form>

$(function() {
  $('#myForm').formValidator({
    required: ['name', 'email', 'phone', 'password', 'confirmPassword'],
    email: ['email'],
    phone: ['phone'],
    minlength: [{name: 'password', length: 8}],
    maxlength: [{name: 'password', length: 20}],
    number: ['phone'],
    equalTo: [{name: 'confirmPassword', equalTo: 'password'}]
  });
});

在这个例子中，我们对表单进行了必填、电子邮件格式、手机号格式、最小长度、最大长度、数字格式、两个字段相等等多种验证。如果表单验证不通过，会在相应的输入框上添加一个 error 类。