어떻게 만들지: 암호��정

CSS와 JavaScript를 사용하여 암호��정 인증 폼을 만들어보세요.

패스워드 검증

본인이 직접 시도해 보세요

암호��정 인증 폼 생성

단계 1 - HTML 추가:

<div class="container">
  <form action="/action_page.php">
    <label for="usrname">Username</label>
    <input type="text" id="usrname" name="usrname" required>
    <label for="psw">비밀번호</label>
    <input type="password" id="psw" name="psw" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required>
    <input type="submit" value="제출">
  </form>
</div>
<div id="message">
  <h3>비밀번호는 다음을 포함해야 합니다:</h3>
  <p id="letter" class="invalid"><b>소문자</b> 문자</p>
  <p id="capital" class="invalid"><b>대문자</b> 문자</p>
  <p id="number" class="invalid"><b>숫자</b></p>
  <p id="length" class="invalid">최소 <b>8자</b></p>
</div>

주의:비밀번호 필드에서 pattern 속성(정규 표현식을 포함)을 사용하여 제출 양식 제한을 설정합니다: 최소 8개의 문자가 있어야하며, 그 중至少有一个数字,一个大写字母 and一个小写字母.

第二步 - CSS 추가:

입력 필드와 메시지 상자의 스타일 설정:

/* 모든 입력 필드 스타일 설정 */
input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
}
/* 제출 버튼 스타일 설정 */
{input[type=submit] }
  background-color: #04AA6D;
  color: white;
}
/* 입력 컨테이너 스타일 설정 */
.container {
  background-color: #f1f1f1;
  padding: 20px;
}
/* 사용자가 비밀번호 필드를 클릭할 때 메시지 창 표시 */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 20px;
  margin-top: 10px;
}
#message p {
  padding: 10px 35px;
  font-size: 18px;
}
/* 요구 사항이 올바르면,緑색 텍스트 색상과 체크 마크 추가 */
.valid {
  color: green;
}
.valid:before {
  position: relative;
  left: -35px;
  content: "✔";
}
/* 요구 사항이 오류일 때, 빨간 텍스트 색상과 "x" 아이콘 추가 */
.invalid {
  color: red;
}
.invalid:before {
  position: relative;
  left: -35px;
  content: "✖";
}

세 번째 단계 - JavaScript 추가하기:

<script>
var myInput = document.getElementById("psw");
var letter = document.getElementById("letter");
var capital = document.getElementById("capital");
var number = document.getElementById("number");
var length = document.getElementById("length");
// 사용자가 비밀번호 필드를 클릭할 때, 메시지 창을 표시하기
myInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
}
// 사용자가 비밀번호 필드 외부를 클릭할 때, 메시지 창을 숨기기
myInput.onblur = function() {
  document.getElementById("message").style.display = "none";
}
// 当用户开始在密码字段中输入内容时
myInput.onkeyup = function() {
  // Validate lowercase letters
  var lowerCaseLetters = /[a-z]/g;
  if(myInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
}
  // 验证大写字母
  var upperCaseLetters = /[A-Z]/g;
  if(myInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }
  // 验证数字
  var numbers = /[0-9]/g;
  if(myInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }
  // 验证长度
  if(myInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
}
</script>

본인이 직접 시도해 보세요

관련 페이지

교육:HTML 양식