在前端开发中，用户输入数据的验证是非常重要的一个环节，其中用户名是一个必须验证的重点。而JavaScript作为前端开发的重要语言之一，能够非常方便地对用户名进行判断和验证。

首先，我们需要定义一个合法的用户名，它应该满足以下要求：

1. 用户名长度应该在6-20个字符之间；
2. 只能包含字母、数字、下划线和减号；
3. 不能以数字、下划线或减号开头；

基于这些要求，我们就可以开始写代码进行判断了：

function checkUsername(username) {
var reg = /^[a-zA-Z][a-zA-Z0-9_\-]{5,19}$/;
if (reg.test(username)) {
return true;
} else {
return false;
}
}

代码说明：

1. 先定义一个正则表达式，用于验证用户名；
2. 使用test()方法对输入的用户名进行验证；
3. 如果正则表达式与用户名匹配，那么返回true；否则返回false。

下面我们就来举个例子，看看这段代码是如何运作的：

var username = "123hello";
if (checkUsername(username)) {
console.log("用户名合法");
} else {
console.log("用户名不合法");
}

代码说明：

1. 定义一个用户名；
2. 使用checkUsername()方法进行验证；
3. 如果用户名合法，那么输出“用户名合法”；否则输出“用户名不合法”。

除了上面的例子外，我们还可以在使用 input 标签时，使用 onblur 方法进行实时的验证。

<input type="text" id="username" onblur="checkName()">

function checkName() {
var username = document.getElementById("username").value;
if (checkUsername(username)) {
console.log("用户名合法");
} else {
console.log("用户名不合法");
}
}

代码说明：

1. 定义一个 input 标签，当用户离开输入框时，触发 onblur 事件；
2. 定义一个 checkName() 方法，用于获取输入框中的值、对其进行验证并输出结果。

综上所述，JavaScript对于用户名的判断非常便捷，只需定义一个正则表达式，即可快速判断用户名是否符合规范。尤其是在表单中使用，可以有效防止恶意攻击和用户输入错误。因此，在前端开发中，对于用户名的验证是必不可少的。