JSFiddle - React, Tailwind, and code Playground

HTML

Manual tests: 
<input id="txt" type="text"><br>
<input type="button" onclick="testMe()" value="  test  ">
    <hr>
Automatic Tests:        
<div id="out"></div>
<pre id="test"></pre>

CSS

.oh { color: red }
.ok { color: green }

JavaScript

var ex = /^[a-z][a-z0-9]*$/i
  , tests = 
    { "joe"           : true //only lower case
     , "JOE"          : true //only capital
     , "charsAndCaps" : true //mixed case
     , "ABC444"       : true //caps and numbers
     , "AAaaAA3276"   : true //mixed case with numbers
     , "111Joe"       : false //starts with number
     , "112345"       : false //only numbers
     , "asaaa$"       : false //non-alphanumeric char in the end
     , "asaaaלא"      : false //non-latin char in the end
     , "asaaнет"      : false //non-latin char in the end
     , "#asaaa"       : false //non-alphanumeric char in the start
     , "לאasaaa"      : false //non-latin char in the start
     , "нетasaa"      : false //non-latin char in the start
     , "aaלאasaa"     : false //non-latin char in the middle
     , "sssнетaa"     : false //non-latin char in the middle
     , "as&&aaa"      : false //non-alphanumeric char in the middle
     , ""             : false //empty string
    }
  ;

function runCases() {
    var strCase
      , expect
      , got
      , results = []
      , fail = 0
      ;
  
    for (strCase in tests) {
        expect = tests[strCase];
        got = ex.test( strCase )
        results.push(
            expect == got
            ? "<b class=ok>ok</b> - " + JSON.stringify(strCase) + " got " + expect + " as expected"
            : "<b class=oh>NO</b> - " + JSON.stringify(strCase) + " needs " + expect + " but got " + got + ". fail #" + (++fail)
        )
    }
    
    results.push(
      "<hr>"
    , "total  : " + results.length 
    , "failed : " + fail
    , "pass   : " + (results.length - fail )
    , ""
    , fail 
      ? "<h2 class=oh> FAILED </h2>" 
      : "<h2 class=ok> PASSED </h2>"
    );
    
    $e("test").innerHTML = results.join("\n") 
}

window.onload = runCases


function $e(s) {
    return document.getElementById(s);
}

function testMe() {
    var s = $e("txt").value
      , o = $e("out")
      , isOk = ex.test(s)
      ;
    o.innerHTML =...