实现客户端的非空校验

实现客户端的非空校验可以使用 JavaScript 来实现。以下是一个示例代码：

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>

  <button type="submit" onclick="return validateForm()">Submit</button>
</form>

<script>
function validateForm() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username == "" || password == "") {
    alert("Username and password cannot be empty!");
    return false;
  }
  return true;
}
</script>

该代码中，我们首先定义了一个表单，其中包含一个用户名输入框和一个密码输入框，以及一个提交按钮。在提交按钮的 `onclick` 事件中，我们调用了 `validateForm()` 函数进行校验。该函数首先获取了用户名和密码的值，然后判断它们是否为空。如果其中任何一个为空，就会弹出一个警告框提示用户输入不能为空，并返回 `false` 阻止表单提交。否则，返回 `true` 允许表单提交。

这样，当用户点击提交按钮时，就会先进行非空校验，确保输入框不为空，从而提高了用户体验。