如果鍵入@符號，則進行表單驗證更改CSS

Question

目前，我正在配置帶有驗證的表單。 一切都很好。 但是，我試圖讓用戶輸入@符號時更改CSS。 現在，當用戶使用以下代碼輸入4個以上的字符時，CSS發生了變化：

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if (count >= 4) {
            $('#Emailinput').css({
                'border-color': '#c1c1c1',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

現在，我想在鍵入@符號時將count更改為事件。 我到處看都發現這段代碼：

if ($('#email').val().indexOf('@') > -1) {

所以我將代碼更改為：

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if ($('#Emailinput').val().indexOf('@') > -1) {
            $('#Emailinput').css({
                'border-color': '#c1c1c1',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});

有什么幫助，以便在鍵入@符號時更改CSS？ 我是否將找到的代碼放在正確的位置？ 任何幫助，將不勝感激。

Answer 1

我認為您的代碼已經可以使用了， 請在此處查看

JS

$(document).ready(function() {
    $('#Emailinput').keyup(function() {
        var count = this.value.replace(/ /g, '').length;
        var imageUrl = 'https://example.nl/wp-content/themes/example/img/check.png';
        var imageUrlcls = 'https://example.nl/wp-content/themes/example/img/close.png';
        $('#Emailinput').text(count);

        if ($('#Emailinput').val().indexOf('@') > -1) {
            $('#Emailinput').css({
                'border-color': 'green',
                'border-width': '5px',
                'background-image':'url( '+ imageUrl + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });            
        } else {
            $('#Emailinput').css({
                'border-color': 'red',
                'background-image':'url( '+ imageUrlcls + ' )',
                'background-repeat':'no-repeat',
                'background-position': '98%'
            });
        }
    });
});