html 中文输入法输入时姓名的验证

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');