jquery - 如果键入 @ 符号，则表单验证更改 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

我认为您的代码已经可以工作了，see it here

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%'
            });
        }
    });
});