编写JavaScript代码实现用户登录时数据合法性校验的功能，界面如图6-2所示。要求如下

这是一个比较常见的前端开发任务，下面给出一个简单的实现方案。

首先，需要在 HTML 文件中创建一个表单，包含用户名和密码两个输入框，以及一个提交按钮。代码如下：

<form>
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
  </div>
  <button type="submit">登录</button>
</form>

接着，在 JavaScript 文件中添加表单提交事件的监听器，代码如下：

document.querySelector('form').addEventListener('submit', function(event) {
  // 阻止表单默认的提交行为
  event.preventDefault();
  // 获取表单中的用户名和密码输入框
  var usernameInput = document.querySelector('#username');
  var passwordInput = document.querySelector('#password');
  // 获取输入框中的值
  var username = usernameInput.value;
  var password = passwordInput.value;
  // 对用户名和密码进行合法性校验
  if (username.trim() === '') {
    alert('用户名不能为空');
    usernameInput.focus();
    return;
  }
  if (password.trim() === '') {
    alert('密码不能为空');
    passwordInput.focus();
    return;
  }
  // 如果校验通过，则提交表单
  this.submit();
});

在事件监听器中，首先阻止表单默认的提交行为，然后获取用户名和密码输入框的值，对其进行合法性校验。如果输入框中的值为空，则弹出提示框并将焦点设置到对应的输入框中，返回即可。如果校验通过，则调用表单的 submit 方法提交表单。

最后，需要注意一点，即在服务器端也需要对用户输入进行校验，前端只是起到了一个辅助的作用。