Как реализовать проверку формы с помощью css 🤦‍♂️

визуализация

принцип

Среди элементов формы естьpatternАтрибут, вы можете настроить регулярное выражение (например, номер мобильного телефона, адрес электронной почты, удостоверение личности ..);valid伪类, которому можно сопоставитьpatternпроверенные элементы;invalid伪类Наоборот, можно сопоставить неудачноpatternЭлементы проверки, так что вы можете сделать это небрежно.Выше визуализации только для некоторых простых эффектов.Для большего количества эффектов и ограничений, вы можете использовать свое воображение;

html

Планировка простая,inputиbutton- это отношения одноуровневых узлов,requiredАтрибут является обязательным, то есть входное содержимое должно быть проверено;

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

css

используется здесьscssПрепроцессор, четкая структура

input {
  // 验证通过时按钮的样式
  &:valid {
    &~button {
      pointer-events: all;
      cursor: pointer;

      &::after {
        content: "提交👍"
      }
    }
  }

  // 验证不通过时按钮的样式
  &:invalid {
    &~button {
      pointer-events: none; // 去除点击事件，让按钮无法点击（无法阻止键盘focus再回车触发）

      &::after {
        content: "未通过验证😒"
      }
    }
  }
}

Наконец

Если вы считаете, что эта статья хороша, пожалуйста, не забудьте нажать赞и关注О~😊

визуализация

принцип

html

css

Рекомендовано в прошлом

Наконец