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