Question

我有一个包含帐单和运输信息的订单，想验证每个输入的各自功能。

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

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

我已经尝试通过查找输入ID而不是输入名称来解决输入更改事件中的问题，但是它仍然调用ValidateText函数而不是ValidateZipCode函数。 ValidateText函数内部的Console.logging显示正确的顺序[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>

该表格适用于具有has_one送货地址的订单模型。表单可以正确提交并可以正确地与数据库验证一起使用，但是在客户端，我希望输入order [shipping_address_attributes] [zipcode]来调用ValidateZipCode函数，但实际上是在调用ValidateText函数。

Answer 1

您不能像这样将字符串或语句组合在一起：

input.name ==“ order [shipping_address_attributes] [city]” || “ | order [shipping_address_attributes] [state]” || “ order [first_name]” || “ order [last_name]”

这实际上是在做

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

OR

"order[shipping_address_attributes][state]"

OR ...等

要点是，第二个字符串开始没有与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）;

希望有帮助

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

1 个答案: