切换输入

Question

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

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

这是代码（只关注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（）方法但效率不高。

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

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

Answer 1

问题是因为您要从以前添加的$('#upload').on('click', function() { var file_data = $('#pic').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); $.ajax({ url : 'upload.php', // point to server-side PHP script dataType : 'text', // what to expect back from the PHP script, if anything cache : false, contentType : false, processData : false, data : form_data, type : 'post', success : function(output){ alert(output); // display response from the PHP script, if any } }); $('#pic').val(''); /* Clear the file container */ }); 中删除该类，而不是删除span本身。您可以使用span来完成此操作，如下所示：

.next('span').remove()

Working example

Answer 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/

Answer 3

使用form-group等进行此操作的另一种方法，看起来更漂亮w / 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"); 
  }
});