So implementieren Sie die Formularvalidierungsfunktion in CSS

Prinzip

Im Formularelement gibt es ein Musterattribut, mit dem reguläre Ausdrücke (z. B. Mobiltelefonnummer, E-Mail, Personalausweis usw.) angepasst werden können. Die gültige Pseudoklasse kann mit Elementen übereinstimmen, die die Musterüberprüfung bestehen. Die ungültige Pseudoklasse hingegen kann mit Elementen übereinstimmen, die die Musterüberprüfung nicht bestehen.

(Empfohlenes Tutorial: CSS-Einführungs-Tutorial)

HTML-Code

Das Layout ist sehr einfach, Eingabe und Schaltfläche sind Geschwisterknoten und die erforderlichen Attribut ist Erforderlich bedeutet, dass der eingegebene Inhalt überprüft werden muss;

<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

Der hier verwendete scss-Präprozessor

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

Empfohlene Video-Tutorials: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Formularvalidierungsfunktion in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!