编写基于Jquery的表单验证插件个性化html

首先，需要定义要验证的表单元素和它们对应的验证规则。可以使用一个对象来存储这些信息：

var fields = {
  username: {
    required: true,
    minlength: 6,
    maxlength: 20
  },
  email: {
    required: true,
    email: true
  },
  password: {
    required: true,
    minlength: 8,
    maxlength: 20
  },
  confirm_password: {
    required: true,
    equalTo: '#password'
  }
};

在这个例子中，有四个表单元素需要验证，分别是用户名、电子邮件、密码和确认密码。每个元素的验证规则都以属性的形式存储，比如 `required` 表示该元素必须填写，`minlength` 和 `maxlength` 分别表示最小和最大长度，`email` 表示必须是合法的电子邮件地址，`equalTo` 表示必须与指定的另一个元素的值相同。

接下来，需要编写一个插件来实现表单验证功能。可以使用 jQuery 的扩展机制来实现这个插件。以下是一个简单的例子：

$.fn.myValidation = function(options) {
  var settings = $.extend({
    errorClass: 'error',
    errorMessage: 'This field is required'
  }, options);

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

    $form.find('input[type="submit"]').on('click', function(event) {
      event.preventDefault();

      $form.find('.' + settings.errorClass).removeClass(settings.errorClass);

      $.each(fields, function(name, rules) {
        var $field = $form.find('[name="' + name + '"]');
        var value = $field.val();

        if (rules.required && !value) {
          $field.addClass(settings.errorClass);
          $field.after('<span class="' + settings.errorClass + '-message">' + settings.errorMessage + '</span>');
        }

        if (rules.minlength && value.length < rules.minlength) {
          $field.addClass(settings.errorClass);
          $field.after('<span class="' + settings.errorClass + '-message">This field must be at least ' + rules.minlength + ' characters long</span>');
        }

        if (rules.maxlength && value.length > rules.maxlength) {
          $field.addClass(settings.errorClass);
          $field.after('<span class="' + settings.errorClass + '-message">This field must be no more than ' + rules.maxlength + ' characters long</span>');
        }

        if (rules.email && value && !isValidEmail(value)) {
          $field.addClass(settings.errorClass);
          $field.after('<span class="' + settings.errorClass + '-message">This field must be a valid email address</span>');
        }

        if (rules.equalTo && value !== $form.find(rules.equalTo).val()) {
          $field.addClass(settings.errorClass);
          $field.after('<span class="' + settings.errorClass + '-message">This field must match ' + rules.equalTo + '</span>');
        }
      });
    });
  });
};

function isValidEmail(value) {
  // 判断是否为合法的电子邮件地址
}

这个插件的作用是在表单提交时对每个表单元素进行验证，如果有错误，则添加一个错误类和错误消息。可以通过传入参数来定制错误类和错误消息的样式。

最后，需要编写个性化的 HTML 代码来显示错误消息。可以通过设置 CSS 样式来实现不同的样式效果。以下是一个简单的例子：

<form>
  <label for="username">Username:</label>
  <input type="text" name="username" id="username">

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

  <label for="password">Password:</label>
  <input type="password" name="password" id="password">

  <label for="confirm_password">Confirm Password:</label>
  <input type="password" name="confirm_password" id="confirm_password">

  <input type="submit" value="Submit">
</form>

<style>
  .error {
    border-color: red;
  }

  .error-message {
    color: red;
  }
</style>

在这个例子中，当表单元素验证不通过时，会添加一个名为 `error` 的 CSS 类，用来显示错误的边框颜色。同时，也会添加一个名为 `error-message` 的 CSS 类，用来显示错误消息的文本颜色。可以根据自己的需求来修改这些样式。