2

「パスワードの確認」フィールドのテキストが「パスワード」のテキストと同じ場合、「有効」アイコンを表示するにはどうすればよいですか? 例の名前と電子メール フィールドに似ています。電子メールの確認と名前の css コードは次のとおりです。

input[type=text]:required:valid,[type=email]:required:valid,textarea:required:valid{
background:url(valid.png) 90% center no-repeat #FFF ; 
}

例: http://data.imagup.com/10/1160658139.JPG

4

1 に答える 1

2

CSS はプログラミング言語ではありません。

Javascript を使用して、サーバー側またはクライアント側でフィールドを検証する必要があります。

最新のブラウザーでの現在の HTML5 実装を使用すると、入力の値を確認できます。しかし、私の知る限り、純粋な css だけでは同じ値をチェックすることはできません。

<input type="password" id="pass" name="pass" required pattern="[A-Z]{3}[0-9]{4}"
     title="Password numbers consist of 3 uppercase letters followed by 4 digits."/>

The constraint validation apiを見てください。

上記の API を使用してメールの類似性をチェックする方法の例を次に示します。

<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>
    function check(input) {
        if (input.value != document.getElementById('email_addr').value) {
            input.setCustomValidity('The two email addresses must match.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>
于 2012-08-27T09:17:53.327 に答える