利用前端插件化设计一个表单校验功能

bigFace
201 阅读2分钟

利用一个表单校验功能的小demo，学习前端插件化思想。 加入有个现存的表单，输入用户名和密码进行登录。 要从外部进行扩展，比如对必填字段校验，字段长度进行限制等。 这里可以利用插件化思想进行扩展。 先展示效果：

表单校验.gif

1.写一个表单。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>插件化Demo</title>
</head>
<body>
  <form id="loginForm">
    <div>
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" requiredd data-maxlength="8">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" requiredd >
    </div>
    <div>
      <button type="submit">登录</button>
    </div>
  </form>

  <script src="plugins.js"></script>
  <script src="main.js"></script>
</body>
</html>

2..使用了一个全局的 PluginLibrary 对象作为插件库。插件通过注册到这个对象中来实现插件化设计。

插件通过注册到这个对象中来实现插件化设计。 RequiredFieldsPlugin 插件实现了必填字段验证的功能，它在 validate 方法中遍历表单中的输入框，检查是否存在 requiredd 属性，并验证输入框的值是否为空。 在 loginForm 的提交事件中，我们调用了 PluginLibrary.run(loginForm)，它会遍历插件库中的所有插件，并执行其中的 validate 方法，从而进行表单验证。 插件 LengthLimitPlugin，它用于验证输入框的输入长度是否超过了指定的最大长度。我们使用 data-maxlength 属性来指定最大长度

// 插件库对象
var PluginLibrary = {
    plugins: [],
    register: function(plugin) {
      this.plugins.push(plugin);
    },
    run: function(form) {
      for (var i = 0; i < this.plugins.length; i++) {
        var plugin = this.plugins[i];
        if (plugin.validate) {
          if (!plugin.validate(form)) {
            return false; // 若验证失败，则停止后续插件的运行
          }
        }
      }
      return true; // 所有插件验证通过
    },
    showError: function(message) {
      console.error('错误消息：', message);
    }
  };
  
  // 必填字段验证插件
  var RequiredFieldsPlugin = {
    validate: function(form) {
      var inputs = form.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.hasAttribute('requiredd') && input.value === '') {
          PluginLibrary.showError('必填字段验证失败');
          return false;
        }
      }
      return true;
    }
  };
  
  // 长度限制插件
  var LengthLimitPlugin = {
    validate: function(form) {
      var inputs = form.getElementsByTagName('input');
      for (var i = 0; i < inputs.length; i++) {
        var input = inputs[i];
        if (input.hasAttribute('data-maxlength')) {
          var maxLength = parseInt(input.getAttribute('data-maxlength'));
          if (input.value.length > maxLength) {
            PluginLibrary.showError('长度限制验证失败');
            return false;
          }
        }
      }
      return true;
    }
  };
  
  // 注册插件
  PluginLibrary.register(RequiredFieldsPlugin);
  PluginLibrary.register(LengthLimitPlugin);

3.在main.js中进行表单提交事件，使用插件进行校验。

// 获取表单元素
var loginForm = document.getElementById('loginForm');

// 给表单绑定提交事件
loginForm.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  // 执行插件验证
  var isValid = PluginLibrary.run(loginForm);
  if (isValid) {
    console.log('表单验证通过，提交中...');
    // 实际项目中可以在此处进行表单提交操作
  }
});

保存以上代码为三个文件：index.html、plugins.js 和 main.js，并在同一目录下运行 index.html 文件。 如果后续还要加其他校验功能功能，可以在plugins.js中加其他插件即可

avatar
文章
阅读
粉丝