Javascript 选择局部视图的特定图元

我在局部视图中应用javascript函数时遇到困难

我的目标是验证电子邮件是否键入正确，并根据情况的结果插入消息文本

此电子邮件字段位于已加载的分部中。如果用户有一封或多封电子邮件，则会加载此部分，从而根据需要加载尽可能多的部分

我这里的问题是，对于页面加载的每个部分，函数都会复制，我希望部分验证结果不会干扰其他部分。 遵循下面的部分代码

<li class="control-group3 nested-fields">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email:</label>
    <div class="col-sm-5">
      <%= person.text_field :name, class:"form-control" %>
    </div>
  </div>
  <br/>
  <div class="form-group">
    <label class="col-sm-2 control-label">Email Type:</label>
    <div class="col-sm-5">
      <%= person.collection_select :email_type_id, @email_type,
      :id, :name, {prompt: true}, {class: "form-control m-b"} %>
    </div>
  </div>
  <br/>
  <%= link_to_remove_association button_tag('Remover', type: "button", class: "btn btn-link"), person %>
  <hr/>
</li>
<script>

**$("input[name*='[emails_attributes]']").blur(function() {**
  var input = $(this).val();
  function IsEmail(email) {
    var exclude = /[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
    var check = /@[\w\-]+\./;
    var checkend = /\.[a-zA-Z]{2,3}$/;
    if (((email.search(exclude) != -1) || (email.search(check)) == -1) || (email.search(checkend) == -1)) {
      return false;
    } else {
      return true;
    }
  }

  **if (IsEmail(input)) {
    $(this).after("<div id='msgemail'>E-mail válido</div>");
  } else {
    $(this).after("<font color='red'>E-mail inválido </font>");
  }**
});

</script>

电邮：


电子邮件类型：




**$（“输入[name*='[emails_attributes]']））.blur（函数（）{**
var输入=$（this.val（）；
功能电子邮件（电子邮件）{
var exclude=/[^@\-\.\w]^[\.\-].[\.\.\-]{2}.[\.]{2}.[\.]{2}.[124；（@）[^@]*\ 1/；
变量检查=/@[\w\-]+\./；
var checkend=/\[a-zA-Z]{2,3}$/；
如果（（email.search（排除）！=-1）| |（email.search（检查））=-1）| |（email.search（检查结束）=-1））{
返回false；
}否则{
返回true；
}
}
**如果（电子邮件（输入））{
美元（本）。之后（“电子邮件válido”）；
}否则{
美元（本）。之后（“电子邮件inválido”）；
}**
});

首先，您需要将javascript逻辑与此部分分开（以避免逻辑重复）

我建议采用不同的方法：

---

谢谢你，我的朋友，你的回答解决了我的问题。

$(".email-validation").on("input", function() {
  var email = $(this).val();

  if (IsEmail(email)) {
    showSuccess($(this));
  } else {
    showError($(this));
  }
});

$("form").on("submit", function(event) {
    event.preventDefault();
  var email = $(this).find('.email-validation').val();

  if (IsEmail(email)) {
    showSuccess($(this));
  } else {
    showError($(this));
  }
});

function showError(element) {
    element.parents('form').find('.success').hide();
  element.parents('form').find('.error').show();
}

function showSuccess(element) {
    element.parents('form').find('.success').show();
  element.parents('form').find('.error').hide();
}

function IsEmail(email) {
  var exclude = /[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
  var check = /@[\w\-]+\./;
  var checkend = /\.[a-zA-Z]{2,3}$/;
  if (((email.search(exclude) != -1) || (email.search(check)) == -1) || (email.search(checkend) == -1)) {
    return false;
  } else {
    return true;
  }
}