使用兩個輸入字段將功能添加到.keyup（）

Question

我有一個密碼字段和一個密碼確認字段。 我正在嘗試將密鑰表添加到這兩個字段中，以便每當有人開始輸入密鑰時，我都可以向他們顯示密碼是否匹配。

我實現了一個可行的版本，但是如您所見，它並不理想。

function comparePassword() {
  var password1 = $("#password1").val();
  var password2 = $("#password2").val();

  if (password1 != password2) {
    $(".divDoPasswordsMatch").html("Passwords do not match!");
  }
  else {
    $(".divDoPasswordsMatch").html("Passwords match.");
  }

$("#password1, #password2").keyup(comparePassword);

我不想在comparePassword函數中設置變量password1和password2。 部分原因是我需要多次使用此功能。 我想將這兩個輸入字段傳遞到keyup中，如下所示：

$("#password1, #password2").keyup(comparePassword($("#password1").val(), $("#password2").val()));

理想情況下，我希望comparePassword知道從＃password1和＃password2繼承值，而無需再次指定：

$("#password1, #password2").keyup(comparePassword(this.value, this.value)); 

最后兩個代碼示例不起作用。 我該怎么寫？

提前致謝！

Answer 1

您可以通過這種方式重新排列代碼。

 //this will be the function that will compare any two different string values function comparePassword(password1, password2) { if (password1 != password2) { $(".divDoPasswordsMatch").html("Passwords do not match!"); } else { $(".divDoPasswordsMatch").html("Passwords match."); } } $(document).ready(function(){ $("#password1, #password2").keyup(function(){ comparePassword($("#password1").val(), $("#password2").val()); }); } ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="password1"> <input type="text" id="password2"> <div class="divDoPasswordsMatch"></div> 

Answer 2

您需要為處理該事件的事件創建一個處理程序。 像這樣：

var keyupHandler = function() {
  comparePassword($("#password1").val(), $("#password2").val());
};
$("#password1, #password2").keyup(keyupHandler);

您的代碼示例不起作用的主要原因是因為它們都立即調用函數，而不是在事件發生時調用。 那就是處理程序要照顧的。

Answer 3

您可以通過修改如下代碼來實現您要執行的操作：

 //Create references to required DOM elements once at the beginning of your script var pw1 = $("#password1"); var pw2 = $("#password2"); var pwMatch = $(".divDoPasswordsMatch"); function comparePassword(password1, password2) { if (password1 != password2) { pwMatch.html("Passwords do not match!"); } else { pwMatch.html("Passwords match."); } } $(pw1, pw2).keyup(() => { //Pass the values on keyup - dont have to worry about querying the DOM for the input elements again comparePassword(pw1.val(), pw2.val()); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Password 1: <input id="password1" type="text" /><br/> Password 2: <input id="password2" type="text" /> <div class="divDoPasswordsMatch"></div> 

Answer 4

jQuery的一個例子

 // write mini JQuery plugin $.fn.isSamePasswords = function(){ return this[0].value === this[1].value } //example on keyup $("#password1, #password2").keyup(function(){ var pm = $("#password1, #password2").isSamePasswords() ? "Passwords match." : "Passwords do not match!" $(".divDoPasswordsMatch").html(pm); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="password" id="password1"/> <input type="password" id="password1"/> <br/> <div class="divDoPasswordsMatch"></div> 

另一個

 var password_inputs = $("#password1, #password2") password_inputs.keyup(function(e) { var pm = password_inputs[0].value === password_inputs[1].value ? "Passwords match" : "Passwords not match!" $(".divDoPasswordsMatch").html(pm); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="password" id="password1" /> <input type="password" id="password1" /> <br/> <div class="divDoPasswordsMatch"></div> 

Answer 5

您可以使用“緩存構造器”，通過盡可能多地保存引用來使進程的強度最小。 這還將在處理時將處理程序附加到適當的位置。

 function Passwords(display, ...sel) { this.fields = sel.map(field => $(field)); this.display = $(display); this.toDisplay = (msg) => this.display.html(msg); this.theSame = () => new Set(this.fields.map(field => field.val())).size == 1; this.compare = () => this.toDisplay(this.theSame() ? "Passwords Match" : "Passwords Do Not Match"); this.fields.forEach(field => field.keyup(this.compare)); } Passwords(".divDoPasswordsMatch", "#password1", "#password2"); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="password1" /> <input id="password2" /> <div class="divDoPasswordsMatch"> </div>