Hướng dẫn how do i make my html password confirm? - làm cách nào để xác nhận mật khẩu html của tôi?

70

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có một dự án trong đó tôi phải thêm một biểu mẫu đăng ký và tôi muốn xác thực rằng mật khẩu và xác nhận các trường bằng nhau mà không cần nhấp vào nút Đăng ký.

Nếu mật khẩu và xác nhận trường mật khẩu sẽ không khớp, thì tôi cũng muốn đặt một thông báo lỗi ở bên cạnh trường xác nhận và nút đăng ký.

Sau đây là mã HTML của tôi ..

 
    username : 
 

    password : 
     
    confirm password:

    

  

Có cách nào để làm điều này không? Cảm ơn trước sự giúp đỡ nào.

Aelor

10,6K3 Huy hiệu vàng30 Huy hiệu bạc47 Huy hiệu đồng3 gold badges30 silver badges47 bronze badges

Đã hỏi ngày 12 tháng 2 năm 2014 lúc 11:57Feb 12, 2014 at 11:57

2

Chúng tôi sẽ xem xét hai cách tiếp cận để đạt được điều này. Có và không sử dụng jQuery.

1. Sử dụng jQuery

Bạn cần thêm chức năng khóa cho cả mật khẩu của mình và xác nhận các trường mật khẩu. Lý do là sự bình đẳng văn bản nên được kiểm tra ngay cả khi trường

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

2 thay đổi. Cảm ơn @kdjernigan đã chỉ ra điều đó

Theo cách này, khi bạn nhập trường, bạn sẽ biết mật khẩu có giống nhau hay không:

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

password :
  



confirm password:
  
  

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/325/

2. Không sử dụng jQuery

Chúng tôi sẽ sử dụng sự kiện Onkeyup của JavaScript trên cả hai trường để đạt được hiệu ứng tương tự.

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

password :
  



confirm password:
   
  

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/324/

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:11Feb 12, 2014 at 12:11

Aeloraeloraelor

10,6K3 Huy hiệu vàng30 Huy hiệu bạc47 Huy hiệu đồng3 gold badges30 silver badges47 bronze badges

14

Đã hỏi ngày 12 tháng 2 năm 2014 lúc 11:57

Chúng tôi sẽ xem xét hai cách tiếp cận để đạt được điều này. Có và không sử dụng jQuery.

function onChange() {
  const password = document.querySelector('input[name=password]');
  const confirm = document.querySelector('input[name=confirm]');
  if (confirm.value === password.value) {
    confirm.setCustomValidity('');
  } else {
    confirm.setCustomValidity('Passwords do not match');
  }
}

  Password:  

  Confirm :  

  

1. Sử dụng jQueryMay 18, 2020 at 16:07

Bạn cần thêm chức năng khóa cho cả mật khẩu của mình và xác nhận các trường mật khẩu. Lý do là sự bình đẳng văn bản nên được kiểm tra ngay cả khi trường

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

2 thay đổi. Cảm ơn @kdjernigan đã chỉ ra điều đólaggingreflex

Theo cách này, khi bạn nhập trường, bạn sẽ biết mật khẩu có giống nhau hay không:33 gold badges132 silver badges184 bronze badges

1

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

password :
  



confirm password:
  
  

function check_pass() {
    if (document.getElementById('password').value ==
            document.getElementById('confirm_password').value) {
        document.getElementById('submit').disabled = false;
    } else {
        document.getElementById('submit').disabled = true;
    }
}

Al.G.

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/325/6 gold badges34 silver badges55 bronze badges

2. Không sử dụng jQueryFeb 12, 2014 at 12:07

Chúng tôi sẽ sử dụng sự kiện Onkeyup của JavaScript trên cả hai trường để đạt được hiệu ứng tương tự.rjhdby

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/324/11 silver badges15 bronze badges

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:11

Aeloraelor

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

0

Sử dụng SetCustomValialprecisely what you asked for:

• So sánh các giá trị đầu vào mật khẩu/xác nhận-password trên sự kiện

  var check = function() {
    if (document.getElementById('password').value ==
      document.getElementById('confirm_password').value) {
      document.getElementById('message').style.color = 'green';
      document.getElementById('message').innerHTML = 'matching';
    } else {
      document.getElementById('message').style.color = 'red';
      document.getElementById('message').innerHTML = 'not matching';
    }
  }

  3 của họ và setCustomValility cho phù hợp:without clicking the register button
• Đã trả lời ngày 18 tháng 5 năm 2020 lúc 16:07at the side of confirm password field and disable registration button

LaggingReflexLaggingReflex

31K33 Huy hiệu vàng132 Huy hiệu bạc184 Huy hiệu đồng

Nếu bạn không muốn sử dụng jQuery:Feb 12, 2014 at 12:09

4.2376 Huy hiệu vàng34 Huy hiệu bạc55 Huy hiệu ĐồngNate

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:072 silver badges4 bronze badges

1

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

1

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

2

Al.G.

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/325/6 gold badges34 silver badges55 bronze badges

2. Không sử dụng jQueryFeb 12, 2014 at 12:30

Chúng tôi sẽ sử dụng sự kiện Onkeyup của JavaScript trên cả hai trường để đạt được hiệu ứng tương tự.

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

3

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/324/

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

4

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:11Oct 2, 2018 at 12:49

AeloraelorChandrahasa Rai

Sử dụng SetCustomValial1 gold badge4 silver badges10 bronze badges

So sánh các giá trị đầu vào mật khẩu/xác nhận-password trên sự kiện

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

3 của họ và setCustomValility cho phù hợp:

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

5

Đã trả lời ngày 18 tháng 5 năm 2020 lúc 16:07

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

6

LaggingReflexLaggingReflexFeb 12, 2014 at 12:01

31K33 Huy hiệu vàng132 Huy hiệu bạc184 Huy hiệu đồngkrishna

Nếu bạn không muốn sử dụng jQuery:2 gold badges29 silver badges56 bronze badges

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

7

4.2376 Huy hiệu vàng34 Huy hiệu bạc55 Huy hiệu Đồng

• Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:07
• rjhdbyrjhdby

LaggingReflexLaggingReflexFeb 12, 2014 at 12:01

31K33 Huy hiệu vàng132 Huy hiệu bạc184 Huy hiệu đồngGaurav

Nếu bạn không muốn sử dụng jQuery:2 gold badges8 silver badges18 bronze badges

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

8

4.2376 Huy hiệu vàng34 Huy hiệu bạc55 Huy hiệu Đồng

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:07Feb 12, 2014 at 12:05

rjhdbyrjhdbyKalpit

1.19611 huy hiệu bạc15 huy hiệu đồng4 gold badges24 silver badges43 bronze badges

Giải pháp sử dụng jQuery

Và cập nhật biểu mẫu của bạn cho phù hợp:

$('#password, #confirm_password').on('keyup', function () {
  if ($('#password').val() == $('#confirm_password').val()) {
    $('#message').html('Matching').css('color', 'green');
  } else 
    $('#message').html('Not Matching').css('color', 'red');
});

9

Điều này sẽ làm chính xác những gì bạn đã yêu cầu:

password :
  



confirm password:
  
  

0

Xác thực rằng mật khẩu và các trường xác nhận bằng nhau mà không cần nhấp vào nút Đăng ký

password :
  



confirm password:
  
  

1

Nếu mật khẩu và xác nhận trường mật khẩu sẽ không khớp, nó sẽ đặt một thông báo lỗi ở phía bên xác nhận trường mật khẩu và tắt nút đăng kýFeb 12, 2014 at 12:14

Nên không sử dụng Trình nghe sự kiện Keyup cho mọi Keypress vì thực sự bạn chỉ cần đánh giá nó khi người dùng được thực hiện nhập thông tin. Nếu ai đó gõ nhanh trên máy chậm, họ có thể nhận thấy độ trễ vì mỗi lần nhấn phím sẽ khởi động chức năng.Sherin Jose

Ngoài ra, trong biểu mẫu của bạn, bạn đang sử dụng nhãn sai. Phần tử nhãn có thuộc tính "cho" sẽ tương ứng với ID của phần tử biểu mẫu. Điều này là để khi những người bị khiếm thị sử dụng đầu đọc màn hình để gọi ra trường biểu mẫu, nó sẽ biết văn bản thuộc về trường nào.3 gold badges18 silver badges38 bronze badges

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:09

password :
  



confirm password:
  
  

2

Natenate

password :
  



confirm password:
  
  

3

3222 Huy hiệu bạc4 Huy hiệu đồng

password :
  



confirm password:
  
  

4

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:30

MÃ HTMLFeb 12, 2014 at 12:17

Mã JSSparK

Đã trả lời ngày 2 tháng 10 năm 2018 lúc 12:492 gold badges23 silver badges32 bronze badges

password :
  



confirm password:
  
  

5

Al.G.

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/325/6 gold badges34 silver badges55 bronze badges

2. Không sử dụng jQueryApr 8, 2015 at 13:08

1

Chúng tôi sẽ sử dụng sự kiện Onkeyup của JavaScript trên cả hai trường để đạt được hiệu ứng tương tự.

Và đây là Fiddle: http://jsfiddle.net/aelor/f6sev/324/

password :
  



confirm password:
  
  

6

Đã trả lời ngày 12 tháng 2 năm 2014 lúc 12:11

password :
  



confirm password:
  
  

7

Aeloraelor

Sử dụng SetCustomValialApr 9, 2019 at 15:56

So sánh các giá trị đầu vào mật khẩu/xác nhận-password trên sự kiện

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

3 của họ và setCustomValility cho phù hợp:Shojaeddin

Đã trả lời ngày 18 tháng 5 năm 2020 lúc 16:071 gold badge15 silver badges15 bronze badges

LaggingReflexLaggingReflex

Khi kích hoạt chức năng

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

5, tôi đã thay đổi

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

6 thành

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

7 để khóa cuối cùng được áp dụng cũng có thể được xử lý. Mặt khác, khi bạn nhập mật khẩu, ví dụ: "1234", khi bạn nhập khóa cuối cùng "4", tập lệnh kích hoạt

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

5 trước khi xử lý "4", do đó, nó thực sự kiểm tra "123" thay vì "1234". Bạn phải cho nó một cơ hội bằng cách để chìa khóa đi lên :) Bây giờ mọi thứ sẽ hoạt động tốt!

#Chandrahasa Rai, Mã HTML:

password :
  



confirm password:
  
  

8

#tôi sửa đổi:

password :
  



confirm password:
  
  

9

Đã trả lời ngày 20 tháng 8 năm 2020 lúc 15:15Aug 20, 2020 at 15:15

MyxirmyxirMyxir

Phù hiệu bằng đồng 1144 bronze badges

Tôi nghĩ rằng ví dụ này là tốt để kiểm tra https://codepen.io/diegoleme/pen/surik

Tôi có thể trích dẫn mã ở đây

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

0

và

var check = function() {
  if (document.getElementById('password').value ==
    document.getElementById('confirm_password').value) {
    document.getElementById('message').style.color = 'green';
    document.getElementById('message').innerHTML = 'matching';
  } else {
    document.getElementById('message').style.color = 'red';
    document.getElementById('message').innerHTML = 'not matching';
  }
}

1

Đã trả lời ngày 14 tháng 9 năm 2020 lúc 4:46Sep 14, 2020 at 4:46

TuananhcwrstuananhcwrsTuananhcwrs

7615 Huy hiệu bạc4 Huy hiệu đồng5 silver badges4 bronze badges

Làm cách nào để xác nhận mật khẩu của tôi trong HTML?

Làm cách nào để thêm mật khẩu và xác nhận xác nhận?

Làm thế nào để bạn xác nhận HTML?

Làm cách nào để xác nhận trường mật khẩu trong biểu mẫu mà không cần tải lại trang?