HTML, CSS 및 jQuery: 아름다운 로그인 양식 유효성 검사 구축

HTML, CSS 및 jQuery: 아름다운 로그인 양식 유효성 검사 구축

웹 개발에서 로그인 양식은 일반적인 구성 요소입니다. 양식 유효성 검사는 사용자가 웹사이트나 애플리케이션에 로그인할 때 보안과 정확성을 보장하는 중요한 단계입니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 아름다운 로그인 양식 확인을 구축하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1단계: HTML 구조 초기화

먼저 HTML 구조를 만들어 보겠습니다. 다음은 기본 로그인 양식의 예입니다.

<form id="login-form">
  <h2 id="用户登录">用户登录</h2>
  <input type="text" id="username" placeholder="用户名">
  <input type="password" id="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

2단계: CSS 스타일 추가

로그인 양식을 더 보기 좋게 만들려면 CSS 스타일을 추가해야 합니다. 다음은 기본 CSS 예입니다.

#login-form {
  max-width: 300px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
}

h2 {
  margin-bottom: 20px;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

3단계: jQuery 유효성 검사 논리 작성

이제 jQuery를 사용하여 양식 유효성 검사 논리를 추가해 보겠습니다. 양식을 제출할 때 사용자 이름과 비밀번호를 확인합니다. 확인이 성공하면 사용자는 로그인이 허용되며, 확인에 실패하면 오류 메시지가 표시됩니다.

다음은 기본 jQuery 예입니다.

$(document).ready(function() {
  $("#login-form").submit(function(event) {
    event.preventDefault(); // 阻止表单提交

    var username = $("#username").val();
    var password = $("#password").val();

    // 对用户名和密码进行验证
    if (username === "" || password === "") {
      $("#login-error").html("请填写用户名和密码");
    } else if (username !== "admin" || password !== "123456") {
      $("#login-error").html("用户名或密码不正确");
    } else {
      $("#login-error").html(""); // 清空错误消息
      // 登录成功之后的操作
    }
  });
});

4단계: 오류 메시지 표시

오류 메시지를 표시하려면 HTML 구조에 오류 메시지를 표시하기 위한 요소를 추가해야 합니다.

<div id="login-error"></div>

양식이 제출되면 유효성 검사 결과에 따라 이 요소가 동적으로 업데이트됩니다.

전체 코드 예

다음은 모든 HTML, CSS 및 jQuery 코드가 포함된 전체 예입니다.

  
  


  

    
用户登录
    
    
    登录
  
  <div id="login-error"></div>

  
  <script>
    /* jQuery验证逻辑 */
  </script>

결론

HTML, CSS 및 jQuery를 사용하면 아름다운 로그인 양식 유효성 검사를 쉽게 구축할 수 있습니다. 사용자가 양식을 제출하면 jQuery를 사용하여 입력의 유효성을 검사하고 유효성 검사 결과에 따라 오류 메시지를 표시합니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 HTML, CSS 및 jQuery: 아름다운 로그인 양식 유효성 검사 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!