JS简单实现登陆验证附效果图

下面是“JS简单实现登陆验证附效果图”的完整攻略：

1. 确定页面布局

首先需要确定页面布局，包含输入框、登陆按钮等元素。例如，可以使用下面的 HTML 代码：

<!-- 页面布局 -->
<form id="login-form">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  <br>
  <button type="submit" id="login-button">登陆</button>
</form>

2. 编写 JS 代码实现登陆验证

接下来就需要编写 JavaScript 代码实现登陆验证功能了。具体思路如下：

（1）获取用户名和密码的输入框元素。

（2）给登陆按钮添加点击事件监听器，当点击登陆按钮时，获取用户名和密码输入框中的值。

（3）对用户名和密码进行验证，例如判断用户名和密码是否为空，是否符合特定格式等。

（4）如果验证通过，则登陆成功，可以跳转到下一个页面；否则登陆失败，给出相应提示。

下面是一段示例代码：

// 获取元素
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const loginButton = document.querySelector('#login-button');

// 添加事件监听器
loginButton.addEventListener('click', event => {
  // 阻止默认的提交表单事件
  event.preventDefault();

  // 获取用户名和密码
  const username = usernameInput.value.trim();
  const password = passwordInput.value.trim();

  // 验证用户名和密码
  if (username === '') {
    alert('用户名不能为空');
    return;
  }
  if (password === '') {
    alert('密码不能为空');
    return;
  }

  // 登陆成功
  alert('登陆成功！');
  // 可以在这里跳转到下一个页面
});

3. 添加一些特效

最后可以为登陆表单添加一些特效，例如在输入框获得焦点时高亮显示，或者在登陆成功后跳转页面时添加动画效果等。下面是一个简单的示例代码：

// 添加特效
usernameInput.addEventListener('focus', () => {
  usernameInput.classList.add('focused');
});
usernameInput.addEventListener('blur', () => {
  usernameInput.classList.remove('focused');
});

// 登陆成功后跳转页面，并添加动画效果
function redirectToNextPage() {
  // 在这里写跳转页面的代码
}
loginButton.addEventListener('click', event => {
  // 先阻止默认事件
  event.preventDefault();

  // 验证用户名和密码
  if (username === '') {
    alert('用户名不能为空');
    return;
  }
  if (password === '') {
    alert('密码不能为空');
    return;
  }

  // 登陆成功
  alert('登陆成功！即将跳转到下一个页面');
  document.body.classList.add('redirecting');
  setTimeout(redirectToNextPage, 3000); // 延迟 3 秒后跳转
});

这里使用了 CSS 中的 transition 属性实现动画效果，代码如下：

#login-form.focused label {
  color: #007aff;
}
input.focused {
  border-color: #007aff;
  box-shadow: 0 0 3px rgba(0, 122, 255, 0.4);
}
body.redirecting #login-form {
  opacity: 0;
}