JSFiddle - React, Tailwind, and code Playground

JavaScript

var regex = /^[a-zA-Z0-9.\-_$@*!]{3,30}$/;
var tests = ['User.name',
             'User name',
             'User,name',
             'usernameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'];

for (var i = 0; i < tests.length; i++) {
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(tests[i] + ' = ' + (regex.test(tests[i]) ? 'pass' : 'fail')));
    document.body.appendChild(p);
}