2024-05-29 今天學到了 event.preventDefault(); // 防止表單提交
防止秀出系統 default 的訊息 ,使用preventDefault()的medhod()
部份程式如下:
1 2 3 4 5 6 7 8
| <button class="submit" type="submit" onclick="btn_submit(event)">註冊
<div class="toast-success"> ✅ 註冊成功!可以查看 Email 確認細節! </div>
</button>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
| function btn_submit(event) { event.preventDefault();
let valid = true;
let nickname = document.querySelector('#nick-name').value.trim(); if (nickname === "" || nickname === null | nickname.length>40) { let elem_err_nickname = document.querySelector('.err-nick-name'); elem_err_nickname.style.visibility = 'visible'; valid = false; } else { let elem_err_nickname = document.querySelector('.err-nick-name'); elem_err_nickname.style.visibility = 'hidden'; }
let email = document.querySelector('#email').value.trim(); if (email === "" || !email.includes('@')) { let elem_err_email = document.querySelector('.err-email'); elem_err_email.style.visibility = 'visible'; valid = false; } else { let elem_err_email = document.querySelector('.err-email'); elem_err_email.style.visibility = 'hidden'; }
let password = document.querySelector('#current-password').value.trim(); if (password === "" || password.length < 8 || password.length > 100) { let elem_err_password = document.querySelector('.err-password'); elem_err_password.style.visibility = 'visible'; valid = false; } else { let elem_err_password = document.querySelector('.err-password'); elem_err_password.style.visibility = 'hidden'; }
if (valid) { document.querySelector('#nick-name').value = ''; document.querySelector('#email').value = ''; document.querySelector('#current-password').value = ''; document.querySelector('.toast-success').style.display='block'; } else{ document.querySelector('.toast-success').style.display='none'; } }
|