如何使用j查询将字体真棒图标添加到输入文本::之后？

Question

我有一张像这张图片的注册表单：

使用jQuery代码检查有效的电子邮件和代码后：

function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }

我想在我的电子邮件输入表单后插入一个字体真棒图标（如果为true则检查图标，如果为false则检查交叉图标），如下图所示：

那么我怎么能用jQuery做到这一点，我想为这个图标设置颜色？

Answer 1

看起来:before和:after不适用于输入，您必须为输入容器设置此项。

尝试这种方法，看看它是否有帮助：

<强> HTLM：

<div class="container">
<h3>Enter valid email</h3>
<div class="input-container" id="email-container">
  <input type="text" required placeholder="you@example.com" id="email" />
</div>
</div>

<强> CSS：

.input-container{
  position:relative;
  height:32px;
}
.input-container input{
  width:100%;
  padding:8px;
}
#email-container:before,
#email-container:after{
  position:absolute;
  right:10px;
  top:10px;
  font-family: FontAwesome;
  z-index:1;
  display:none;
}
#email-container:before{
   content:'\f00c';
   color: green;
 }
#email-container:after{
   content:'\f00d';
   color: red
}
.valid-email:before{
  display:block !important;
}
.invalid-email:after{
  display:block !important;
}
.valid{
  border:1px solid green;
}
.invalid{
  border:1px solid red;
}

<强> JS：

$(function(){
    $('#email').bind({
    blur: function(){
        if($(this).val() != ''){
        if(isEmail($(this).val())){
            $('#email-container').removeClass('invalid-email').addClass('valid-email');
          $(this).removeClass('invalid');
          $(this).addClass('valid');
        }else{
            $('#email-container').removeClass('valid-email').addClass('invalid-email');
          $(this).removeClass('valid');
          $(this).addClass('invalid');
        }
      }
    }
  });
});

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

请在此处查看此解决方案：https://jsfiddle.net/pkm05tax/

Answer 2

＆＃13;

＆＃13;

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

$('.email').on('submit', function(e) {
  e.preventDefault();
  var emailAddress = $(this).find('input[type=text]').val();
  if (isEmail(emailAddress)) {
  	$(this).find('input[type=text]').addClass('fa-check')
  } else {
  	$(this).find('input[type=text]').addClass('fa-times')
  };
});

＆＃13;

<form class="email">
  <input type="text" class="fa">
  <button>Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;