原則
form 要素には pattern 属性があり、正規表現 (携帯電話番号、電子メール、ID カードなど) をカスタマイズできます。 valid pseudo-class は、パターン検証に合格する要素と一致しますが、反対に、invalid pseudo-class は、パターン検証に合格しない要素と一致します。
(推奨チュートリアル: CSS 入門チュートリアル )
html コード
レイアウトは非常にシンプルで、入力とボタンは兄弟ノードであり、 required 属性が Required であることは、入力されたコンテンツを検証する必要があることを意味します。
<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 コード
ここで使用される scss プリプロセッサ
input { // 验证通过时按钮的样式 &:valid { &~button { pointer-events: all; cursor: pointer; &::after { content: "提交:+1:" } } } // 验证不通过时按钮的样式 &:invalid { &~button { pointer-events: none; // 去除点击事件,让按钮无法点击 &::after { content: "未通过验证:unamused:" } } } }
関連ビデオ チュートリアルの推奨事項: css ビデオチュートリアル#########
以上がCSSでフォームバリデーション機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。