【obj.max obj['max']】

函数调用有两种写法

代理： 把 get set 方法拿出来作人为干涉

 "use strict";
      class Validate {
        max(value, len) {
          return value.length > len;
        }
        min(value, len) {
          return value.length < len;
        }
        isNumber(value) {
          return /^\d+$/.test(value);
        }
      }
      let vd = new Validate();


// 方式1：点语法
vd.max()

// 方式2：方括号语法
vd['max']()

原生输入框校验

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>表单验证组件工厂</title>
    <style>
      .container-app {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 20%;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        box-shadow: 0 0 10px #ccc;
      }
      .container input {
        margin: 10px;
        border: 0.5px solid #514e4e;
        border-radius: 2px;
      }
      .error {
        border: 1px solid red !important;
        border-radius: 2px !important;
      }
    </style>
  </head>
  <body>
    <div class="container-app">
      <div class="container">
        <input type="text" validate rule="max:12,min:3" />
        <input type="text" validate rule="max:3,isNumber" />
      </div>
    </div>
    <script>
      // 表单验证组件工厂
      "use strict";
      class Validate {
        max(value, len) {
          return value.length <= len;
        }
        min(value, len) {
          return value.length >= len;
        }
        isNumber(value) {
          return /^\d+$/.test(value);
        }
      }
      let vd = new Validate();
      //   console.log(vd.max("123", 2));
      //   console.log(vd.min("123", 2));
      //   console.log(vd.isNumber("123"));

      function ProxyFactory(target) {
        // 只有一种解释：无论怎样返回target
        return new Proxy(target, {
          get(target, key) {
            return target[key];
          },
          // 如果是数组 key 是 索引
          // 如果是对象 key 是 属性名
          // 无论是数组还是对象，key 都是字符串
          set(target, key, el) {
            console.log("===>>>", target, key, el);
            const rule = el.getAttribute("rule");
            console.log(rule);
            let state = rule.split(",").every((rule) => {
              const info = rule.split(":");
              return vd[info[0]](el.value, info[1]);
            });
            console.log(state);
            el.classList[state ? "remove" : "add"]("error");
            return true; // 表示设置成功
          },
        });
      }
      // target => [validate] 数组
      const proxy = ProxyFactory(document.querySelectorAll("[validate]"));
      // 参数列表 array.forEach(function(currentValue, index, array) {
      proxy.forEach((item, i) => {
        item.addEventListener("keyup", function () {
          proxy[i] = this; // el
        });
      });
    </script>
  </body>
</html>

比较有意思的点：
el.classList[state ? "remove" : "add"]("error");

posted @ 2025-04-15 22:10  十三山入秋  阅读(74)  评论(0)    收藏  举报