compositionstart
和compositionend
事件来处理中文输入法输入时的验证。
compositionstart
事件在中文输入法开始输入时触发,而compositionend
事件在中文输入法输入完成后触发。你可以在compositionstart
事件中暂时禁用验证逻辑,在compositionend
事件中重新启用验证并执行验证逻辑。
function validateNameInput(inputId, errorId) {
var nameInput = document.getElementById(inputId);
var nameError = document.getElementById(errorId);
var isComposing = false; // 记录是否正在进行中文输入法输入
nameInput.addEventListener('compositionstart', function() {
isComposing = true;
});
nameInput.addEventListener('compositionend', function() {
isComposing = false;
validateInput();
});
nameInput.addEventListener('input', function () {
if (!isComposing) {
validateInput();
}
});
function validateInput() {
var nameValue = nameInput.value.trim();
if (nameValue === '') {
nameError.textContent = '姓名 必填!';
nameError.style.display = 'inline';
nameInput.style.borderColor = 'red';
} else if (nameValue.length > 20) {
nameError.textContent = '姓名 长度需小于等于 20!';
nameError.style.display = 'inline';
nameInput.style.borderColor = 'red';
} else if (!/^(?:[\u4e00-\u9fa5]+|[a-zA-Z]+)$/.test(nameValue)) {
nameError.textContent = '姓名 不是有效的姓名,仅支持全部汉字或全部英文字母!';
nameError.style.display = 'inline';
nameInput.style.borderColor = 'red';
} else {
nameError.style.display = 'none';
nameInput.style.borderColor = '#155ede';
}
}
}
validateNameInput('nameInputOne', 'nameError');