gpt4 book ai didi

jquery - 如果键入 @ 符号,则表单验证更改 CSS

转载 作者:行者123 更新时间:2023-11-28 15:16:27 25 4
gpt4 key购买 nike

目前我正在配置一个带有验证的表单。一切顺利。但我试图让 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 在输入 @ 符号时发生变化?我是否将找到的代码放在了正确的位置?任何帮助,将不胜感激。

最佳答案

我认为您的代码已经可以工作了,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%'
});
}
});
});

关于jquery - 如果键入 @ 符号,则表单验证更改 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42901589/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com