CSS에서 양식 유효성 검사 기능을 구현하는 방법

Principle

양식 요소에는 패턴으로 확인된 요소와 일치할 수 있는 정규식(휴대폰 번호, 이메일, ID 카드 등)을 사용자 정의할 수 있는 패턴 속성이 있습니다. ; 유효하지 않은 의사 클래스 반대로, 패턴 검증에 실패한 요소와 일치할 수 있습니다.

(추천 튜토리얼: CSS 입문 튜토리얼)

html 코드

레이아웃은 매우 간단합니다. 입력과 버튼의 관계는 형제 노드입니다. 필수 속성은 필수, 즉 입력 내용을 확인해야 함을 의미합니다. ;

<section class="container">
  <input type="text" name="tel" placeholder="请输入手机号码" pattern="^1[3456789]\d{9}$" required><br>
  <input type="text" name="tel" placeholder="请输入验证码" pattern="\d{4}" required><br>
  <button type="submit"></button>

css code

scss 전처리기가 여기서 사용됩니다

input {
  // 验证通过时按钮的样式
  &:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;
      &::after {
        content: "提交:+1:"
      }
    }
  }
  // 验证不通过时按钮的样式
  &:invalid {
    &~button {
      pointer-events: none; // 去除点击事件，让按钮无法点击
      &::after {
        content: "未通过验证:unamused:"
      }
    }
  }
}

추천 비디오 튜토리얼:css 비디오 튜토리얼

위 내용은 CSS에서 양식 유효성 검사 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!