在两个事件发生后采取行动 - JS

Question

想要在电子邮件验证和复选框标记后更改提交按钮颜色。添加了有关更改的侦听器，它们运行良好。但是不知道如何找出这个事件何时会发生以启动函数什么会改变提交按钮的颜色。

```
https://jsfiddle.net/nvologdins/brfj2xk1/
```

Answer 1

这是一个基本示例，说明如何执行此操作。

如果用户再次更改值，我还稍微更改了逻辑以更新值。 - @Ultimater 也提到了这一点。

function setupButton() {
  if (validEmail && validCheckbox) {
    // add/show/enable submit button or simply change the color
    button.style.color = "red";
  } else {
    // remove/hide/disable submit button revert the changes
    button.style.color = "";
  }
}
form.input.addEventListener('input', (event)=>{
  validEmail = emailRegex.test(event.target.value);
  setupButton();
})
form.checkbox.addEventListener('change', (event)=>{
  validCheckbox = event.target.checked;
  setupButton();
})

我还建议使用 Constraint Validation API 验证表单的不同方法。

每个元素都有一个有效性检查，可以使用formElement.checkValidity() 在表单元素上轻松访问，如果表单内的所有（必需）字段都填充了有效值，则返回真/假。

<form oninput="this.querySelector('#submitButton').disabled = !this.checkValidity();" onsubmit="event.preventDefault(); console.log('Submit prevented but the form seems to be valid.'); return false;">
  <fieldset>
    <label for="newslettermail">E-Mail</label>
    <!-- you could also define a more specific pattern on the email input since email would allow foo@bar as valid mail -->
    <input type="email" id="newslettermail" required>
  </fieldset>
  <fieldset>
    <input type="checkbox" id="newsletterAcceptTos" required>
    <label for="newsletterAcceptTos">I accept the Terms of Service</label>
  </fieldset>
  <fieldset>
    <label for="textFieldWithPattern">Enter <strong>foo</strong> or <strong>bar</strong></label>
    <input type="text" id="textFieldWithPattern" pattern="^(foo|bar)$" required>
  </fieldset>
  <button type="submit" id="submitButton" disabled>Submit</button>
  <button type="submit">Force submit (will show errors on invalid input)</button>
</form>

使用它，浏览器自己会检查这些值是否包含有效值。

• 带有必需标志的input[type=email] 必须包含有效的邮件地址。
• 必须选中带有必需标志的复选框。
• 带有 required 和模式的 input 必须包含与模式属性中的正则表达式匹配的值。

Answer 2

无需创建额外的变量并分别监听两个表单元素...您只需监听form 元素即可检查整个内容并进行相应更新

let form = document.querySelector('form');
let input = document.getElementById('input');
let checkbox = document.getElementById('checkbox');
let submit = document.getElementById('button');

const emailRegex = /^(([^<>()\[\]\\.,;:\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,}))$/

form.addEventListener('change', (event) => {
  if (checkbox.checked && emailRegex.test(input.value)) {
    submit.style.color = "red";
  } else {
    submit.style.color = "black"
  }
})

//Update
input.addEventListener('input', () => {
  const changeEvent = new Event('change');
  form.dispatchEvent(changeEvent)
})

<form class="main__emailAndTerms emailAndTerms">
  <div class="emailAndTerms__email">
    <input type="text" id="input" placeholder="Type your email address here...">
    <label class="emailAndTerms__terms">I agree to <a href="#"><span class="terms__link">terms of service</span></a>
                <input type="checkbox" class="terms__checkbox" id="checkbox">
                <span class="terms__checkbox_custom"></span>
            </label>
    <button type="submit" class="email__submitButton" id="button">Submit</button>
  </div>
</form>