JS – link this.property (event.target.property) 到变量名（没有 eval()）

Question

我正在编写一个简单的客户端表单验证代码。我正在尝试创建具有验证过程中使用的属性和值的对象（对于每个单独的输入），然后将它们附加到输入节点。

我正在尝试找到一种方法将这些对象自动与各自的输入配对。在下面的代码中，我找到了一种方法来执行此操作，但要付出一定的代价才能使用 eval() 函数，我宁愿避免这样做。在 JS 中还有其他方法可以做到这一点吗？

<label class="c-contact-form__label" for="your_name">Your Name *</label>
<input class="" type="text" name="your_name" maxlength="50" size="30">

var your_name = {
  regex: /^([a-z\u00C0-\u02AB,.'´`]{1,}\.?\s?)([a-z\u00C0-\u02AB,.'´`]?\.?\s?)+$/i,
  required: true,
  invalid: "Your name seems a little bit weird…",
  empty: "Please, fill in your name."
};

// From within a function of eventListener:

var Merged = Object.assign(this, eval(this.name)); // Use of eval()
console.log(Merged.invalid); // "Your name seems a little bit weird…",

我非常努力地在谷歌上搜索解决方案，并且我已经阅读了可能的 context[varName] 解决方案，但它似乎不起作用（或者我不明白）。

Answer 1

您可以使用 eval() 或 context[varName]。上下文可以是带有 var、const 或 let 的变量，或者直接 window[varName] 如果你需要它是全局的。

Answer 2

问题是原始代码包含在 IIFE 中。因此 - AFAIK - 它不能用括号表示法访问，因为它不存在于全局范围内，并且对象本身没有父对象。

const foo = (() => {
  let bar = 'obj';
  const obj = {
    // not accessible by [var]whatever. AFAIK
    whatever: 'bar',
  } 
  console.log([bar].whatever); // undefined
})();

我通过将对象包装到父对象中来解决它：

const foo = (() => {
  let bar = 'obj';
  const parent = {
    //now accessible by parent[bar].
    obj: {
      whatever: 'bar',
    }
  }
  console.log(parent[bar].whatever); // bar
})();

JS – link this.property (event.target.property) 到变量名（没有 eval()）

JS – link this.property (event.target.property) to variable name (without eval())

javascript

variables

validation

eval

dry