사용자 입력 이메일에 따라 계정 삭제 버튼의 동적 표시

이 튜토리얼은 개발자에게 jQuery를 사용하여 사용자 인터페이스 상호 작용 기능을 구현하는 방법을 안내하기위한 것입니다. "계정 삭제"버튼은 사용자가 지정된 입력 상자에 올바른 이메일 주소를 입력 할 때만 표시됩니다. 사전 설정 이메일 주소를 얻고 입력 상자의 입력 이벤트를 듣고 입력 내용에 따라 버튼의 디스플레이 및 숨겨지는 방법을 자세히 설명합니다. 이 튜토리얼을 통해 사용자 입력을 기반으로 페이지 요소 표시를 동적으로 제어하기 위해 실용적인 기술을 마스터하게됩니다.

구현 원리

핵심 아이디어는 다음과 같습니다.

1. 사전 설정 사서함 가져 오기 : 읽기 전용 사서함 입력 상자에서 자리 표시 자 속성의 값을 사용자의 사전 설정 사서함으로 가져옵니다.
2. 입력 이벤트를 들으십시오. 입력 상자의 내용이 변경 될 때마다 트리거됩니다.
3. 사서함 비교 : 입력 박스의 현재 값을 사전 설정 사서함과 비교하십시오.
4. 동적 표시/숨기기 버튼 : 입력 값이 사전 설정 사서함과 일치하는 경우 표시 할 계정 삭제 삭제 버튼의 숨겨진 클래스를 제거하십시오. 그렇지 않으면 숨겨진 클래스를 추가하여 숨기십시오.

코드 구현

전체 HTML, CSS 및 JavaScript 코드 예는 다음과 같습니다.

HTML :

 

를 입력하십시오.



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>

이 HTML 구조에서 :

• 첫 번째 입력 요소는 읽기 전용이며 사용자의 사전 설정 이메일 주소를 표시하는 데 사용됩니다. 자리 표시 자 속성에는 이메일 주소가 포함되어 있습니다.
• 두 번째 입력 요소는 사용자가 입력 할 수있는 것이며 이메일 주소를 입력하여 ID를 확인하는 데 사용됩니다.
• 세 번째 입력 요소는 "계정 삭제"버튼으로, 초기 상태의 hide_del_button 클래스에 의해 숨겨져 있습니다.

CSS :

 .HIDE_DEL_BUTTON {
  디스플레이 : 없음;
}

이 CSS 규칙은 요소를 숨기는 데 사용되는 hide_del_button 클래스를 정의합니다.

JavaScript (jQuery) :

 $ (document) .ready (function () {
  var user_email = $ ( 'input [name = "emp_email"]'). attr ( 'placeholder');

  $ ( ". email-pass-delete"). on ( "input", function () {
    var current_email = $ ( '. email-pass-delete'). val ();

    if (user_email == current_email) {
      $ ( ". del_acount"). removeClass ( "hide_del_button");
    } 또 다른 {
      $ ( ". del_acount"). addClass ( "hide_del_button");
    }
  });
});

이 JavaScript 코드는 jQuery를 사용합니다.

1. $ (document) .ready (function () {...}); : 문서가로드 된 후 코드를 실행하십시오.
2. var user_email = $ ( 'input [name = "emp_email"]'). attr ( 'placeholder'); : 읽기 전용 사서함 입력 상자의 자리 표시 자 속성 값을 얻고 user_email 변수에 저장하십시오.
3. $ ( ". email-pass-delete"). on ( "input", function () {...}); : 사서함 입력 상자의 입력 이벤트 리스너를 바인딩합니다.
4. var current_email = $ ( '. email-pass-delete'). val (); : 사서함 입력 상자의 현재 값을 가져옵니다.
5. if (user_email == current_email) {...} else {...} : user_email 및 current_email을 비교하십시오. 동일하면 del_acount 요소의 hide_del_button 클래스를 제거하여 표시하십시오. 그렇지 않으면 Hide_del_Button 클래스를 추가하여 숨기십시오.

주목해야 할 것

• 보안 : 이 방법은 간단한 프론트 엔드 검증 일 뿐이며 보안을 완전히 보장 할 수는 없습니다. 백엔드는 계정 삭제 작업을 수행하기 위해 엄격한 인증 및 승인을 받아야합니다.
• 사용자 경험 : 입력 상자 아래에 "계정을 삭제하려면 이메일 주소를 입력하십시오"와 같은 신속한 정보를 추가 할 수 있습니다.
• 오류 처리 : 사용자가 잘못된 이메일 주소를 입력하는 상황을 고려할 때 오류 프롬프트 정보를 추가 할 수 있습니다.
• 이메일 형식 확인 : 정규 표현식을 사용하여 사용자 경험을 향상시키는 등의 간단한 이메일 형식 확인을 프론트 엔드에 추가 할 수 있습니다.

요약

이 튜토리얼을 통해 jQuery를 사용하여 입력 상자에서 입력 이벤트를 듣고 입력 컨텐츠를 기반으로 한 페이지 요소의 디스플레이를 동적으로 제어하는 ​​방법을 배웠습니다. 이 기술은 양식 필드의 동적 표시, 사용자 선택에 따라 다른 내용 표시 등 다양한 사용자 인터페이스 상호 작용 시나리오에 적용될 수 있습니다. 프론트 엔드 검증은 보조 수단 일 뿐이며 백엔드 보안 검증이 중요합니다.

위 내용은 사용자 입력 이메일에 따라 계정 삭제 버튼의 동적 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!