完整攻略：jquery实现简易验证插件封装

1、需求分析

我们需要一个能够实现表单验证的jQuery插件，该插件能够进行基本的表单数据格式验证，验证成功后能够提交表单数据。

2、设计思路

定义一个名为 "validateForm" 的jQuery插件，该插件接受一个配置对象（包含验证规则和提示信息）作为参数，用于对表单数据进行验证。
在插件中使用 jQuery 的选择器选中表单元素，给表单元素添加提交事件监听，当表单提交时触发验证操作。
创建一个表单校验函数 validate()，该函数包含不同的验证规则，对于多个验证规则可以组合使用。
通过遍历验证规则，来检测用户输入的数据是否符合规则，如果验证不通过，则返回 false 并弹出相应提示信息。
如果所有验证规则都验证通过则提交表单数据。

3、实现过程

下面是该插件的代码实现：

$.fn.validateForm = function(options) {
  var defaults = {
    rules: {
      required: true,
      minlength: 6,
      email: true
    },
    messages: {
      required: "该项不能为空",
      minlength: "该项长度不能小于6位",
      email: "请输入有效的电子邮件地址"
    }
  };

  var settings = $.extend({}, defaults, options);

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

    form.submit(function() {
      return validate();
    });

    function validate() {
      var isValid = true;

      $.each(settings.rules, function(key, value) {
        var input = form.find("[name='" + key + "']");

        if (value && !validateRule(input, key)) {
          showError(input, settings.messages[key]);
          isValid = false;
        }
      });

      return isValid;
    }

    function validateRule(input, rule) {
      switch (rule) {
        case "required":
          return input.val() !== "";
        case "minlength":
          return input.val().length >= settings.rules.minlength;
        case "email":
          var emailFilter = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
          return emailFilter.test(input.val());
        default:
          return true;
      }
    }

    function showError(input, message) {
      var errorHtml = "<span class='error'>" + message + "</span>";
      var errorContainer = input.next(".error");

      if (errorContainer.length === 0) {
        input.after(errorHtml);
      } else {
        errorContainer.replaceWith(errorHtml);
      }
    }
  });
};

该验证插件的配置项包含两个对象： rules 和 messages，其中 rules 定义了各种验证规则和相关配置， messages 用于定义验证失败后的错误提示信息。

该插件通过 jQuery 的 extend() 方法，组合了默认配置和用户配置的配置项，并用 settings 变量存储了最终的配置项。

当表单提交时，会触发 validate() 函数执行验证操作。 validate() 函数通过遍历传入的验证规则，来检测用户输入的数据是否符合规则，如果验证不通过，会通过 showError() 函数弹出相应提示信息。

showError() 函数会根据错误信息生成错误消息，并将其添加在输入框后面。如果已经存在错误提示，则使用 replaceWith() 方法进行替换。

以上就是 jQuery 实现简易验证插件封装的步骤和代码示例。具体使用时，只需要传入合适的参数调用 validateForm() 方法即可。

4、示例说明

以下是两个示例说明：

示例1：基本验证规则

在提交表单时，验证表单中的 "username" 和 "password" 是否符合最小长度和必填项规则。

<form id="validate-form">
  <label for="username">用户名：</label>
  <input type="text" name="username" />
  <br/>
  <label for="password">密码：</label>
  <input type="password" name="password" />
  <br/>
  <input type="submit" value="提交" />
</form>

<script>
$("#validate-form").validateForm({
  rules: {
    username: {
      required: true,
      minlength: 5
    },
    password: {
      required: true,
      minlength: 6
    }
  },
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: "用户名长度不能小于5位"
    },
    password: {
      required: "密码不能为空",
      minlength: "密码长度不能小于6位"
    }
  }
});
</script>

示例2：自定义验证规则

在示例1的基础上，通过扩展验证规则来验证邮箱地址格式是否正确。

<form id="validate-form">
  <label for="username">用户名：</label>
  <input type="text" name="username" />
  <br/>
  <label for="password">密码：</label>
  <input type="password" name="password" />
  <br/>
  <label for="email">邮箱：</label>
  <input type="text" name="email" />
  <br/>
  <input type="submit" value="提交" />
</form>

<script>
$.extend($.fn.validateForm.settings.rules, {
  email: {
    required: true,
    email: true
  }
});

$.extend($.fn.validateForm.settings.messages, {
  email: {
    required: "邮箱不能为空",
    email: "请输入有效的电子邮件地址"
  }
});

$("#validate-form").validateForm({
  rules: {
    username: {
      required: true,
      minlength: 5
    },
    password: {
      required: true,
      minlength: 6
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    username: {
      required: "用户名不能为空",
      minlength: "用户名长度不能小于5位"
    },
    password: {
      required: "密码不能为空",
      minlength: "密码长度不能小于6位"
    },
    email: {
      required: "邮箱不能为空",
      email: "请输入有效的电子邮件地址"
    }
  }
});
</script>

通过调用 $.extend() 方法，使用扩展方法增加了自定义邮箱验证规则，并在验证规则和错误提示信息中添加了相应的配置。这样，在调用 validateForm() 方法时，插件会自动调用新规则进行验证。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现简易验证插件封装 - Python技术站

jquery实现简易验证插件封装