在表單驗證中使用onblur事件可以在用戶離開輸入框時觸發驗證功能,確保用戶輸入的內容符合要求。以下是一個簡單的示例:
<form>
<input type="text" id="username" onblur="validateUsername()">
<span id="usernameError" style="color: red;"></span>
<br>
<input type="email" id="email" onblur="validateEmail()">
<span id="emailError" style="color: red;"></span>
<br>
<button type="submit">提交</button>
</form>
<script>
function validateUsername() {
var username = document.getElementById('username').value;
var usernameError = document.getElementById('usernameError');
if (username.length < 5) {
usernameError.innerText = '用戶名至少需要5個字符';
} else {
usernameError.innerText = '';
}
}
function validateEmail() {
var email = document.getElementById('email').value;
var emailError = document.getElementById('emailError');
if (!email.includes('@')) {
emailError.innerText = '請輸入有效的電子郵件地址';
} else {
emailError.innerText = '';
}
}
</script>
在上面的示例中,我們在輸入框中添加了onblur事件來調用validateUsername()和validateEmail()函數,這兩個函數分別用于驗證用戶名和電子郵件格式是否符合要求。當用戶離開輸入框時,會觸發相應的驗證函數并在頁面上顯示錯誤信息。這樣可以在用戶填寫表單時及時提醒用戶輸入是否正確,提高用戶體驗。