输入更改事件调用错误的函数，但记录正确的输入事件

Question

我有一个包含账单和运输信息的订单，并希望使用各自的功能验证每个输入。

除了一个之外，所有输入都调用了它们的正确验证。我假设这是因为它具有与由不同函数验证的其他输入相似的属性名称。

如何让输入验证正常工作？

我尝试通过查找输入 ID 而不是输入名称来解决输入更改事件期间的问题，但它仍然调用 ValidateText 函数而不是 ValidateZipCode 函数。 ValidateText 函数内部的 Console.logging 显示正确的 order[shipping_address_attributes][zipcode] 输入

if (orderForm) {
  orderForm.addEventListener('change', function(event) {
    validateOrderForm(event.target);
  });
};

function validateOrderForm(field) {
  if (ValidateInput(field)) {
    setValidStyles(field);
console.log("Success: " + field.value);
  } else {
setInvalidStyles(field);
console.log("Failing: " + field.value);
  }
}

function ValidateEmail(input) {
  let reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  console.log("Hello from: Email");
  return reg.test(input);
}

function ValidateText(input) {
  console.log("Hello from: Text");
  return (input.value.length > 0 && input.value.length < 121 && isNaN(input.value) && input.value != "");
}

function ValidateTextWithNumbers(input) {
  console.log("Hello from: TextWithNumbers");
  return (input.value.length > 0 && input.value.length < 121 && input.value != "");
}

function ValidateZipCode(input) {
  console.log("Hello from: Zipcode");
  let reg = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
  return reg.test(input);
}

function ValidateInput(input) {
  if (input.name == "order[shipping_address_attributes][city]" || "order[shipping_address_attributes][state]" || "order[first_name]" || "order[last_name]") {
    return ValidateText(input);
  } else if (input.name == "order[email]") {
return ValidateEmail(input);
  } else if (input.name == "order[recipe_name]" || "order[shipping_address_attributes][address_one]" || "order[shipping_address_attributes][address_two]") {
return ValidateTextWithNumbers(input);
  } else if (input.name == "order[shipping_address_attributes][zipcode]") {
return ValidateZipCode(input);
  } else {
console.log("Input didnt match required input names.");
return false;
  }
}


<div class="order-field">
  <%= form.text_field :first_name, placeholder: "first name", class: "input-small green-input required" %>
</div>      
<div class="order-field">
  <%= form.text_field :last_name, placeholder: "last name", class: "input-small green-input required" %>
</div>

<%= form.fields_for :shipping_address do |builder| %>
  <div class="order-field">
    <%= builder.text_field :address_one, placeholder: "address 1", class: "input-small green-input required" %>
  </div>
  <div class="order-field">
    <%= builder.text_field :address_two, placeholder: "address 2", class: "input-small green-input" %>
  </div>
  <div class="order-field">
<%= builder.text_field :city, placeholder: "city", class: "input-small green-input required" %>
  </div>
  <div class="order-field">
<%= builder.text_field :state, placeholder: "state", class: "input-small green-input required" %>
  </div>
  <div class="order-field">
    <%= builder.text_field :zipcode, placeholder: "zipcode", class: "input-small green-input required" %>
  </div>
<% end %>

<div class="order-field">
  <%= form.text_field :email, placeholder: "email", class: "input-small green-input required" %>
</div>

该表单适用于具有_one shipping_address 的订单模型。 表单正确提交并与数据库验证一起正常工作，但在客户端我期望 order[shipping_address_attributes][zipcode] 输入调用 ValidateZipCode 函数，但它实际上是调用 ValidateText 函数。

Answer 1

你不能像这样把字符串或语句放在一起：

input.name == "order[shipping_address_attributes][city]" || “订单[运输地址属性][状态]”|| “订单[名字]” || “订单[姓氏]”

实际上是：

input.name == "order[shipping_address_attributes][city]"

或

"order[shipping_address_attributes][state]"

或...等

关键是第二个字符串以后没有与 input.name 进行比较。 JS 将 "order[shipping_address_attributes][state]" 评估为布尔值，因为它不是空白，所以它返回 true。

你要么需要input.name == "order[shipping_address_attributes][city]" || input.name == "order[shipping_address_attributes][state]” || ...etc

或者更干净一点：

[ "order[shipping_address_attributes][city]", "order[shipping_address_attributes][state]", "order[first_name]", "order[last_name]"].includes(input.name);

希望有帮助