更改输入时切换引导图标答案

【问题标题】：Switch Bootstrap Icons on change of input更改输入时切换引导图标
【发布时间】：2016-12-10 04:17:12
【问题描述】：

我正在处理密码输入，这是用户的情况。

密码没有条件我要红叉。
当密码足够好时，我想要一个绿色十字。

这是代码（只注意If结构），下面我将解释问题。

    $('#id_password.form-control').on('change', function(){
    var inputVal = $(this).val(); //Quand on appelle this, on récupère la valeur dans laquelle elle est utilisée.
    var passwordReg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/;
    if(!passwordReg.test(inputVal) || ($(this).val() == "")){
        $(this).after('<span style="color:red;" class="glyphicon glyphicon-remove"></span>');
        $(this).removeClass("glyphicon glyphicon-ok");
    }
    else{
        $(this).after('<span style="color:green" class="glyphicon glyphicon-ok"></span>')
        $(this).removeClass("glyphicon glyphicon-remove");
    }
});

我的代码有两个问题：

每次我改变焦点时，我的图标都会重复。我尝试了 .one() 方法，但它只调用了我的方法一次（显然）。
当用户更正自己的密码时，我无法交换图标。我看到了 .removeClass() 方法，但效率不高。

如果你有一些想法或想要更多细节，我很开放，我想纠正我的错误以便注意到它=）

感谢您抽出宝贵时间，祝您在代码中度过愉快的一天 =)

【问题讨论】：

你能做一个jsfiddle吗
jsfiddle.net/3wctaf1n 这是代码，它在我的服务器上不起作用，但你有一个视觉效果。

标签： jquery twitter-bootstrap glyphicons

【解决方案1】：

问题是因为您要从先前添加的 span 中删除该类，而不是删除 span 本身。您可以使用.next('span').remove() 来做到这一点，如下所示：

$('#id_password.form-control').on('change', function(){
    var $input = $(this);
    var inputVal = $input.val();
    var passwordReg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/;

    $input.next('span').remove();
    if ($input.val() == "" || !passwordReg.test(inputVal)) {
        $input.after('<span style="color: red;" class="glyphicon glyphicon-remove"></span>');
    }
    else {
        $input.after('<span style="color: green" class="glyphicon glyphicon-ok"></span>')
    }
});

Working example

【讨论】：

它有效，谢谢，但我不喜欢提供我的代码并等待实验开发人员更正我的解决方案。你能解释一下 .next() 方法吗？
对不起，我不明白你的第一句话。 next() 方法文档在这里：api.jquery.com/next
after 函数在每次按键时附加一个新的 span，next() 函数的作用是帮助选择所有先前附加的 span，remove() 删除它们，这样您就可以添加正确的 span基于输入
谢谢，对不起，我的英语不好。我想说我不喜欢在我有一些错误的时候给出我的代码并等待更正^^'
我使用了一种不同的方法，通过在 dom 中提升一个级别，使用 parent() 选择表单的父元素并使用 find() 我们选择以前附加的跨度并将它们删除，请参阅我的答案:)

【解决方案2】：

尝试以下方法：

 $('#id_password.form-control').on('input', function(){

   $(this).parent().find('.glyphicon').remove();//remove the icons each time the input changes


    var inputVal = $(this).val(); //Quand on appelle this, on récupère la valeur dans laquelle elle est utilisée.
    var passwordReg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/;
    if(!passwordReg.test(inputVal) || ($(this).val() == "")){
        $(this).after('<span style="color:red;" class="glyphicon glyphicon-remove"></span>');
    }
    else{
        $(this).after('<span style="color:green" class="glyphicon glyphicon-ok"></span>');
    }
});

演示：https://jsfiddle.net/L3z2sdLr/

【讨论】：

【解决方案3】：

使用 form-group 等的另一种方法，使用 Bootstrap 看起来更漂亮：

小提琴https://jsfiddle.net/p1rchywb/5/

HTML

<div class="form-group has-feedback">
  <label class="control-label" for="password">Enter Your Password</label>
  <input type="text" class="form-control" id="password">
  <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>

jQuery

$("#password").on("change", function() {
  var passwordReg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{8,}$/;
  if($(this).val() !== "" || passwordReg.test($(this).val()) ) {
    $(this).next().removeClass("glyphicon-remove").addClass("glyphicon-ok");
  } else {
    $(this).next().addClass("glyphicon-remove").removeClass("glyphicon-ok"); 
  }
});

【讨论】：