在前端開發中，用戶輸入數據的驗證是非常重要的一個環節，其中用戶名是一個必須驗證的重點。而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對于用戶名的判斷非常便捷，只需定義一個正則表達式，即可快速判斷用戶名是否符合規范。尤其是在表單中使用，可以有效防止惡意攻擊和用戶輸入錯誤。因此，在前端開發中，對于用戶名的驗證是必不可少的。