JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" 
       style="width:100%"
       oninput="checkValidation(this.value)"
       value="">

<div id="valid">
    Valid
</div>

JavaScript

function has10OrLessCJK(text) {
    return /^[-'a-z\u4e00-\u9eff]{1,20}$/i.test(text);
}

function checkValidation(value) {
alert(value);
    var valid = document.getElementById("valid");
    if (has10OrLessCJK(value)) {
        valid.innerText = "Valid";
    } else {
        valid.innerText = "Invalid";
    }
}