js判断登陆用户名及密码是否为空的简单实例

下面我将为您详细讲解“js判断登陆用户名及密码是否为空的简单实例”的完整攻略。

前置知识

在实现本例中，需要您掌握以下基础知识：

• HTML基础语法
• JavaScript基础语法
• 表单基本操作

实现步骤

1. 创建表单

首先，我们需要在HTML代码中创建一个表单，用于用户输入用户名和密码：

<form id="login-form">
  <label for="username">用户名:</label>
  <input type="text" name="username" id="username">

  <label for="password">密码:</label>
  <input type="password" name="password" id="password">

  <button type="submit">登录</button>
</form>

上述代码创建了一个具有用户名和密码输入框的表单，并且包含一个提交按钮。

2. 编写JavaScript代码

其次，我们需要使用JavaScript编写代码来判断用户输入的用户名和密码是否为空：

// 获取登录表单元素
const loginForm = document.querySelector('#login-form')

// 监听表单提交事件
loginForm.addEventListener('submit', function(event) {
  // 阻止表单默认的提交行为
  event.preventDefault()

  // 获取用户名和密码的输入框元素
  const usernameInput = document.querySelector('#username')
  const passwordInput = document.querySelector('#password')

  // 获取输入框中的值并去掉首尾空格
  const username = usernameInput.value.trim()
  const password = passwordInput.value.trim()

  // 判断用户名和密码是否为空
  if (!username) {
    alert('请输入用户名')
    usernameInput.focus()  // 让输入框获取焦点
    return  // 终止函数，防止继续往下执行
  }

  if (!password) {
    alert('请输入密码')
    passwordInput.focus()
    return
  }

  // 用户名和密码都不为空，可以提交表单
  loginForm.submit()
})

上述代码中，我们首先获取了登录表单元素，并监听了表单的提交事件。当用户点击提交按钮时，我们会首先阻止表单默认的提交行为，然后获取用户名和密码的输入框元素，再判断它们的值是否为空。如果为空，则弹出提示框并让输入框获取焦点；如果不为空，则可以提交表单。

3. 测试结果

最后，我们可以运行在浏览器中运行上述代码，并在登录表单中输入用户名和密码进行测试。当遇到用户名或密码为空时，会提示用户输入并让相应的输入框获取焦点；当用户名和密码均不为空时，会提交表单并进行后续操作。

示例说明

下面，我们提供两个具体的示例，来进一步说明这个实例：

示例一

输入以下内容后点击“登录”按钮：

• 用户名：abc
• 密码：（留空）

此时会提示“请输入密码”，并让密码输入框获取焦点，禁止提交表单。

示例二

输入以下内容后点击“登录”按钮：

• 用户名：abc
• 密码：123456

此时可以成功提交表单，进行后续操作。

以上就是“js判断登陆用户名及密码是否为空的简单实例”的完整攻略。希望对您有所帮助！