Question

我正在尝试执行此功能，但是我无法使其运行。我的console.logs根本不在控制台中运行。此功能应仅针对特定域验证提交时的电子邮件。

function emailValid() {
  console.log('first')

  var formInput = document.querySelectorAll('t186__input');
  console.log('input');
  var formSubmit = document.querySelectorAll('t-submit');
  console.log('submit');
  formSubmit.addEventListener('click', function(e) {
    e.preventDefault();
    console.log('click');

    if (formInput.val().indexOf('@rbc.com') !== -1) {
      return true;
      console.log('hey2');
    } else {
      alert("You have entered an invalid email address");
      return false;
    }

  });

}

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule" value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000;" />
  </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

Answer 1

在这里，您有很多错误。已更正。

1 /。

不需要querySelectorAll
您将初始化代码包装在一个函数中，所以从未调用过。
您的querySelector未使用.类修饰符。

var formInput = document.querySelector('.t186__input');
console.log('input');
var formSubmit = document.querySelector('.t-submit');
console.log('submit');

formSubmit.addEventListener('click', function(e) {

  console.log('click');
  if (formInput.value.indexOf('@rbc.com') !== -1) {
    return true;
    console.log('hey2');
  } else {  
    e.preventDefault();
    alert("You have entered an invalid email address");
    return false;
  }


});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

再整理

document.addEventListener('click', function(e) {
  if (e.target.matches('.t-submit')) {
    let regEx = /@rbc.com/;
    if (regEx.test(document.querySelector('.t186__input').value) === false) {   
      e.preventDefault(); 
      e.stopPropagation();
      alert("You have entered an invalid email address");
      return false;
    }
  }
});

<div class="t186__wrapper">
  <div class="t186__blockinput">
    <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
  <div class="t186__blockbutton">
    <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
  </div>
</div>

包裹在一个from和处理提交事件中。必须假设某处必须有一个表单元素：）

// In this example we need to wait for the DOM to be ready. 
document.addEventListener('DOMContentLoaded', () => {
  // Code in here will execute the the HTML is loaded and the DOM is ready for use.
  setUpFormListener('t_frmSubmit'); // <--- replace with your form class name
});

function setUpFormListener(frmClassName) {
  // In this demo, we bind directly to the form submit. (note we use form.[class] to ensure we only select the form
  document.querySelector(`form.${frmClassName}`)
    .addEventListener('submit', function(e) {
      let regEx = /@rbc.com/;
      if (regEx.test(document.querySelector('.t186__input').value) === false) {
        e.preventDefault();
        e.stopPropagation();
        alert("You have entered an invalid email address");
        return false;
      }
    });
}

<form class="t_frmSubmit" submit="_blank"> 

  <div class="t186__wrapper">
    <div class="t186__blockinput">
      <input type="text" name="EMAIL" class="t186__input t-input js-tilda-rule " value="" placeholder="Your E-mail" data-tilda-rule="email" style="color:#000000; border:1px solid #000000; "> </div>
    <div class="t186__blockbutton">
      <button type="submit" class="t-submit" style="color:#ffffff;background-color:#000000;">Subscribe</button>
    </div>
  </div>

</form>

Answer 2

querySelectorAll('t186__input')和querySelectorAll('t-submit')查找带有标签<t186__input和<t-submit的元素。

根据您的HTML，这些是元素上的类。因此，请使用class选择器

querySelectorAll('.t186__input')和querySelectorAll('.t-submit')

还querySelectorAll返回一个节点数组，因此您必须首先对其进行迭代才能访问每个元素。

如果您只希望使用该类的单个元素，请使用querySelector。

您还刚刚定义了该函数，但未在任何地方调用emailvalid函数。

功能未运行。控制台日志中没有错误

2 个答案: