想要在電子郵件驗證和復選框標記后更改提交按鈕顏色。添加了有關更改的偵聽器，并且它們運行良好。但是不知道如何找出何時會發生此事件以啟動功能會更改提交按鈕顏色的內容。
```
https://jsfiddle.net/nvologdins/brfj2xk1/
```
uj5u.com熱心網友回復：
這是如何執行此操作的基本示例。
如果用戶再次更改值，我還稍微更改了邏輯以更新值。- @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()如果表單內的所有（必填）欄位都填充了有效值，則回傳 true/false。
顯示代碼片段
<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]有需要的標志必須包含一個有效的電子郵件地址。 - 必須選中帶有必需標志的復選框。
- 一個
input與需要和圖案必須包含匹配從圖案屬性的正則運算式的值。
uj5u.com熱心網友回復：
無需創建額外的變數并分別偵聽兩個表單元素......您可以檢查整個事情并僅通過偵聽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 (emailRegex.test(input.value) && checkbox.checked) {
submit.style.color = "red";
} else {
submit.style.color = "black"
}
})<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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/354396.html
標籤：javascript 异步