Hướng dẫn how to check length of password in javascript - cách kiểm tra độ dài của mật khẩu trong javascript

Xây dựng hình thức xác nhận

Khi nào cần xác thực?

Trước hết, có ba nơi chúng tôi muốn xác nhận:

• Xác thực biểu mẫu khi người dùng gửi.
• Xác thực các trường khi người dùng chỉnh sửa chúng.
• Xác thực dữ liệu khi máy chủ nhận được nó.

Lý do tại sao chúng ta cần xác thực dữ liệu ở phía máy chủ (bất kể hai xác nhận khác có tốt như thế nào) là vì người dùng độc hại có thể truy cập mã HTML và JavaScript, yêu cầu giả mạo hoặc bỏ qua xác thực phía máy khách bằng các phương tiện khác.

Tại sao chúng ta cần xác thực phía khách hàng nếu việc xác nhận sẽ xảy ra ở phía trước? Câu trả lời ngắn gọn là xác thực phía khách hàng làm giảm số lượng đệ trình xấu và do đó làm giảm lưu lượng. Động lực thứ hai là xác thực phía máy khách cho phép đưa ra phản hồi cho người dùng nhanh hơn và dễ dàng hơn nhiều.

Như đã nói, bài đăng hiện tại sẽ chỉ đối phó với xác thực phía khách hàng.

Bây giờ, để chạy mã xác thực, chúng ta cần xử lý các sự kiện thích hợp. Cách được đề xuất để thêm trình xử lý sự kiện trong JavaScript đang gọi

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

Vì vậy, chúng tôi sẽ kéo mã từ bạn có thể không cần jQuery để thêm trình xử lý sự kiện:

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

Lưu ý: Đính kèm là một tiện ích mở rộng độc quyền của Microsoft.

Bây giờ chúng ta cần quyết định các sự kiện chúng ta muốn xử lý ...

Sự cám dỗ ban đầu là xử lý từng thay đổi tinh tế của các trường. Hạn chế của điều này là chỉ bằng cách gõ một ký tự duy nhất, hệ thống có thể nói với người dùng rằng nó sai (vì giá trị quá ngắn hoặc bất cứ điều gì). Điều này có thể được giải thích như thể ký tự duy nhất đã được gõ là sai, và sau đó người dùng dừng lại để phân tích những gì sai trước khi tố tụng.

Luke Wroblewski, "Xác thực nội tuyến dưới dạng web", 2009 cho thấy việc sử dụng sự kiện "Blur" (Mất lấy nét) cho kết quả xác thực trong người dùng điền vào các biểu mẫu nhanh hơn.

Sau đây là một trích đoạn từ bài viết:

.

"Bạn đang nói với tôi rằng tôi đã nhập một tên hợp lệ hoặc tên của tôi một cách chính xác?"

Đây có phải là một xác nhận của một mã bưu chính được định dạng chính xác hoặc mã bưu chính chính xác của tôi?

Những loại câu hỏi của người tham gia gây ra một số vấn đề nhỏ trong quá trình thử nghiệm. Những người tham gia của chúng tôi biết rằng chúng tôi không có cách nào để biết tên chính xác hoặc mã bưu chính của họ, vì vậy họ biết rằng nhãn hiệu kiểm tra màu xanh lá cây không có nghĩa là chính xác. Nhưng họ nghĩ nó có nghĩa là gì? Họ không chắc chắn về vấn đề này và đó là vấn đề. Không biết tin nhắn có nghĩa là gì, những người tham gia của chúng tôi đã dừng lại để đặt câu hỏi của người điều hành thay vì tự tin trả lời những câu hỏi rất dễ dàng.

(...)

Khi một số người tham gia nhận thấy một thông báo lỗi trong khi cố gắng trả lời một câu hỏi, họ đã nhập một ký tự bổ sung vào trường đầu vào, hơn là chờ thông báo cập nhật. Nếu tin nhắn được cập nhật tiếp tục hiển thị lỗi, họ đã nhập một ký tự khác, sau đó chờ tin nhắn xác thực cập nhật lại, v.v., dẫn đến thời gian hoàn thành trung bình dài hơn.

(...)

Khi một số người tham gia nhận thấy một thông báo lỗi trong khi cố gắng trả lời một câu hỏi, họ đã nhập một ký tự bổ sung vào trường đầu vào, hơn là chờ thông báo cập nhật. Nếu tin nhắn được cập nhật tiếp tục hiển thị lỗi, họ đã nhập một ký tự khác, sau đó chờ tin nhắn xác thực cập nhật lại, v.v., dẫn đến thời gian hoàn thành trung bình dài hơn.

Ngay bây giờ, bạn rất khó chịu khi bạn không có cơ hội để đặt bất cứ thứ gì vào [lĩnh vực] trước khi nó nhấp nháy màu đỏ với bạn.

Khi tôi nhấp vào trường tên đầu tiên, nó ngay lập tức nói rằng [tên đầu tiên của tôi] quá ngắn. Vâng, tất nhiên nó được! Tôi thậm chí còn bắt đầu!

Tôi thấy khá khó chịu khi các Hội Chữ thập đỏ xuất hiện khi bạn đã gõ xong. Nó chỉ thực sự mất tập trung.

Vì vậy, khuyến nghị ban đầu là sử dụng sự kiện

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

Tuy nhiên, điều đó mang lại một vấn đề khác. Nếu xác thực chỉ xảy ra trên

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

• Để ngăn chặn vấn đề đó, chúng tôi sẽ có trạng thái sau cho từng trường:
• Trống rỗng. Đó là trạng thái ban đầu của lĩnh vực. Không bắt đầu hiển thị mọi thứ là không hợp lệ.
• Xác nhận. Người dùng đang gõ hoặc chỉnh sửa trường. Nó không hợp lệ cũng không hợp lệ.
• Có giá trị. Người dùng đã đặt đầu vào hợp lệ trên trường.

Không hợp lệ. Người dùng đã đặt đầu vào không hợp lệ trên trường.

Điều này dẫn đến sơ đồ trạng thái sau:

Sơ đồ được tạo bằng yuml.

Sau đó, chúng tôi có những điều sau:

• Trống: trên

  function setupValidation(form)
  {
      addEventHandler(form, 'submit', submitHandler);
      var elementIndex = form.elements.length;
      while (elementIndex--)
      {
          addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
          addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
      }
  }
  

  6 sự kiện.
• Xác thực: Trên

  function setupValidation(form)
  {
      addEventHandler(form, 'submit', submitHandler);
      var elementIndex = form.elements.length;
      while (elementIndex--)
      {
          addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
          addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
      }
  }
  

  7,

  function setupValidation(form)
  {
      addEventHandler(form, 'submit', submitHandler);
      var elementIndex = form.elements.length;
      while (elementIndex--)
      {
          addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
          addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
      }
  }
  

  8 và

  function setupValidation(form)
  {
      addEventHandler(form, 'submit', submitHandler);
      var elementIndex = form.elements.length;
      while (elementIndex--)
      {
          addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
          addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
      }
  }
  

  9.
• Hợp lệ hoặc không hợp lệ: trên

  function setupValidation(form)
  {
      addEventHandler(form, 'submit', submitHandler);
      var elementIndex = form.elements.length;
      while (elementIndex--)
      {
          addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
          addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
          addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
      }
  }
  

  1.

Lưu ý: Một điều bổ sung bạn có thể xem xét là sử dụng bộ hẹn giờ để bắt đầu xác thực để chạy một lần sau một số khoảng từ các sự kiện

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

Xác thực ở đâu?

HTML5 đã thêm nhiều phương tiện khác nhau để xác thực biểu mẫu dữ liệu. Tuy nhiên, hỗ trợ trình duyệt không phải là tốt nhất. Điều đó có nghĩa là ngay cả khi chúng tôi chọn mở rộng xác thực HTML5, nó có thể không hoạt động tùy thuộc vào trình duyệt.

Vì vậy, thay vào đó chúng tôi sẽ bỏ qua xác thực HTML5 và tiến hành thêm các sự kiện của chúng tôi:

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

Bây giờ, cho rằng chúng tôi chỉ xây dựng xác thực hình thức, và không phải là một khung xác thực hoặc thư viện biểu mẫu ... chúng tôi chỉ có thể lấy phần tử và trường mẫu để đặt bất kỳ xác thực nào chúng tôi muốn. Nếu chúng ta làm điều đó, thì biểu mẫu không cần phải là một tham số.

Để có mã của chúng tôi chạy khi tải trang, chúng tôi có thể lấy một đoạn trích khác từ bạn có thể không cần jQuery:

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

Bây giờ, chúng ta cần có khả năng lưu trữ trạng thái của các trường. Điều này có thể được thực hiện bởi các thuộc tính, thuộc tính hoặc lớp tùy chỉnh cho đối tượng phần tử. Việc sử dụng các lớp để đánh dấu xác thực cũng sẽ giúp trình bày biểu mẫu.

Khi xác thực biểu mẫu (

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

Theo

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

Thực hiện chính xác, không có tình huống nào tín hiệu sai được đưa ra cho người dùng. Đó là, mã không bao giờ nên trình bày trường là không hợp lệ khi nó hợp lệ; Không nên trình bày trường là hợp lệ khi nó không hợp lệ.

Bạn có thể muốn tắt xác thực HTML5. Có thể được thực hiện bằng cách thêm thuộc tính

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

form.setAttribute('novalidate', 'novalidate');

Bạn cũng có thể muốn xem tài sản

form.setAttribute('novalidate', 'novalidate');

Nếu bạn muốn xử lý xác thực HTML5, bạn có thể sử dụng chức năng

form.setAttribute('novalidate', 'novalidate');

Đọc tương lai: Xác thực biểu mẫu phía máy khách với các biểu mẫu HTML5 và HTML5: JavaScript và API xác thực ràng buộc.

Ngoài ra, xác thực ràng buộc bài viết: Xác thực phía khách hàng bản địa cho các biểu mẫu web của TJ Vantoll có ví dụ tốt về xác thực HTML5.

Nếu chúng tôi xây dựng một thư viện xác nhận hình thức đầy đủ, chúng tôi sẽ gặp rắc rối khi đọc các thuộc tính xác thực HTML5 và bắt chước hành vi của chúng để cung cấp nó cho các trình duyệt cũ. Chúng tôi cũng sẽ phải lo lắng về cách chỉ định các quy tắc xác thực khác mà HTML5 không cung cấp (chẳng hạn như kiểm tra xem hai trường có khớp) mà không phải điều chỉnh mã JavaScript cho từng trường hợp không (vì, như tôi đã nói, đó là nếu chúng tôi đang làm một thư viện).

Đặt phản hồi ở đâu

Đề xuất khả năng sử dụng là nội tuyến các phản hồi. Đó là thêm các phần tử nội tuyến bên cạnh trường với phản hồi làm văn bản. Sau đó, bạn có thể sử dụng CSS hoặc JavaScript để làm cho nó trông lạ mắt.

Lý do cho đề xuất này là những người dựa vào người đọc màn hình sẽ nhận được phản hồi ở đúng vị trí. Ngoài ra, nó sẽ tiếp tục có ý nghĩa ngay cả khi CSS bị vô hiệu hóa hoặc không tải.

Đây là khá nhiều những gì bạn đã làm bằng cách sử dụng phần tử

form.setAttribute('novalidate', 'novalidate');

Lưu ý: Khi đọc giá trị của một trường, chúng ta thường sử dụng

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

form.setAttribute('novalidate', 'novalidate');

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

function setupValidation(form)
{
    addEventHandler(form, 'submit', submitHandler);
    var elementIndex = form.elements.length;
    while (elementIndex--)
    {
        addEventHandler (form.elements[elementIndex], 'reset', resetHandler);
        addEventHandler (form.elements[elementIndex], 'input', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'change', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'keyup', validatingHandler);
        addEventHandler (form.elements[elementIndex], 'blur', validateHandler);
    }
}

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

Quá nhiều, quá phức tạp?

Bạn không cần phải làm điều đó! Khác đã làm điều đó trước đây, và bạn có thể lấy mã từ họ! Muahahahah!

Điều đó sẽ được thực hiện bằng cách sử dụng một thư viện nguồn mở như Validate.js hoặc thoth.js của riêng tôi. Các câu trả lời khác đã có các thư viện khác.

Bạn sẽ có thể tìm thấy nhiều người ATLERNIENT. Tôi không giả vờ làm một danh sách đầy đủ.

Nó được coi là thực hành tốt để tái sử dụng mã. Bạn cũng có thể chọn nghiên cứu mã của các thư viện như vậy để tìm hiểu cách chúng hoạt động.

Câu trả lời cũ

Tôi sẽ bắt đầu bằng cách thêm nhận xét trên mã của bạn:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Thay vào đó, bạn nên nhấn rằng trạng thái đó là hợp lệ cho đến khi được xác minh nếu không:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    message.style.color = goodColor;
    message.innerHTML = "ok!"

    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
    if(pass1.value.length > 5){
        pass1.style.backgroundColor = goodColor;
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

Ngoài ra, hãy chú ý rằng nếu bạn thực hiện cả hai trường khớp và sau đó bạn chỉnh sửa bản đầu tiên, tin nhắn sẽ không biến mất. Trên thực tế, chỉnh sửa cái đầu tiên sẽ không bao giờ làm cho tin nhắn biến mất vì chúng tôi vẫn chỉ kiểm tra cái thứ hai. Thay vào đó bạn có thể kiểm tra cả hai.

Ngoài ra, sử dụng Keyup có thể gây phiền nhiễu và khó hiểu, bạn có thể cân nhắc sử dụng

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

Nếu bạn muốn một cái gì đó fancier, bạn có thể sử dụng phương thức KeyUP để xóa thông báo trong khi người dùng nhập hoặc thậm chí để kiểm tra lại nhưng trên bộ đếm thời gian mà bạn đặt lại trên mỗi lần nhấn phím ...

Hoặc bạn có thể sử dụng xác thực HTML5 vì tại sao không?

Tôi vừa cập nhật thư viện JavaScript của mình để hỗ trợ xác thực Minlength. Cũng đã xuất bản một thư viện trợ giúp để dễ dàng biểu mẫu Validaton với Thoth - nó có thể yêu cầu một số điều chỉnh tùy thuộc vào trường hợp, đặc biệt là nó không bao gồm bất kỳ cơ chế nội địa hóa nào.

Sử dụng Thoth, bạn có thể thực hiện mã của mình như sau. Lưu ý: Vui lòng tải xuống thư viện nếu bạn muốn thêm chúng vào mã của mình.

Thoth sẽ đảm bảo xác nhận này hoạt động trong IE8 hoặc mới hơn và nếu JavaScript không có sẵn, nó sẽ xuống cấp để xác thực biểu mẫu HTML5. Hãy nhớ rằng máy khách luôn có thể thao tác mã JavaScript và HTML, vì vậy hãy lặp lại xác nhận của bạn trên máy chủ.

.valid
{
    color: #66cc66;
}
.invalid
{
    color: #ff6666;
}

<!DOCTYPE html>
<head>
	<title>Demo</title>
	<script src="https://rawgit.com/theraot/thoth/master/thoth.js"></script>
	<script src="https://rawgit.com/theraot/thoth/master/form_helper.js"></script>
</head>
<form data-on-valid="document.getElementById('ok').style.display='';" data-on-invalid="document.getElementById('ok').style.display='none';" data-lacking="you have to enter at least 6 digit!" data-lacking-class="invalid">
<input name="password" type="password" placeholder="password" id="pass1" minlength="6" required="required"/>
<input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" minlength="6" data-validate="match(@#pass1)" required="required"/>
</form>
<div id="ok" class="valid" style="display:none">ok!</div>

Có khá nhiều thuộc tính

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

• function checkPass()
  {
      var pass1 = document.getElementById('pass1');
      var pass2 = document.getElementById('pass2');
      var message = document.getElementById('error-nwl');
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      // You start by checking if they match
      if(pass1.value == pass2.value){
          pass2.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "ok!"
      }else{
          pass2.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " These passwords don't match"
      }
  	// And then that messages gets removed by the result of the length check
      // Also, pass1.length is undefined
      if(pass1.length > 5){
          pass1.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "character number ok!"
      }else{
          pass1.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " you have to enter at least 6 digit!"
      }
  }

  6: Mã sẽ chạy khi biểu mẫu xác thực chính xác.

• function checkPass()
  {
      var pass1 = document.getElementById('pass1');
      var pass2 = document.getElementById('pass2');
      var message = document.getElementById('error-nwl');
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      // You start by checking if they match
      if(pass1.value == pass2.value){
          pass2.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "ok!"
      }else{
          pass2.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " These passwords don't match"
      }
  	// And then that messages gets removed by the result of the length check
      // Also, pass1.length is undefined
      if(pass1.length > 5){
          pass1.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "character number ok!"
      }else{
          pass1.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " you have to enter at least 6 digit!"
      }
  }

  7: Mã sẽ chạy khi biểu mẫu không xác thực.

• function checkPass()
  {
      var pass1 = document.getElementById('pass1');
      var pass2 = document.getElementById('pass2');
      var message = document.getElementById('error-nwl');
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      // You start by checking if they match
      if(pass1.value == pass2.value){
          pass2.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "ok!"
      }else{
          pass2.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " These passwords don't match"
      }
  	// And then that messages gets removed by the result of the length check
      // Also, pass1.length is undefined
      if(pass1.length > 5){
          pass1.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "character number ok!"
      }else{
          pass1.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " you have to enter at least 6 digit!"
      }
  }

  8: Định dạng chuỗi để sử dụng khi không có đủ ký tự. Tương tự như vậy

  function checkPass()
  {
      var pass1 = document.getElementById('pass1');
      var pass2 = document.getElementById('pass2');
      var message = document.getElementById('error-nwl');
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      // You start by checking if they match
      if(pass1.value == pass2.value){
          pass2.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "ok!"
      }else{
          pass2.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " These passwords don't match"
      }
  	// And then that messages gets removed by the result of the length check
      // Also, pass1.length is undefined
      if(pass1.length > 5){
          pass1.style.backgroundColor = goodColor;
          message.style.color = goodColor;
          message.innerHTML = "character number ok!"
      }else{
          pass1.style.backgroundColor = badColor;
          message.style.color = badColor;
          message.innerHTML = " you have to enter at least 6 digit!"
      }
  }

  9 và

           <input name="password" type="password" placeholder="password"  id="pass1"/>
           <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                    <div id="error-nwl"></div>
          

  0 sẽ hoạt động khi có chỗ trước khi đạt

           <input name="password" type="password" placeholder="password"  id="pass1"/>
           <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                    <div id="error-nwl"></div>
          

  1 và khi văn bản vượt trội tương ứng.

•          <input name="password" type="password" placeholder="password"  id="pass1"/>
           <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                    <div id="error-nwl"></div>
          

  3: Lớp CSS để sử dụng cho thông điệp thiếu, similary

           <input name="password" type="password" placeholder="password"  id="pass1"/>
           <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                    <div id="error-nwl"></div>
          

  4 và

           <input name="password" type="password" placeholder="password"  id="pass1"/>
           <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                    <div id="error-nwl"></div>
          

  5 tồn tại.

Trên đây được thêm bởi Thư viện trợ giúp

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

         <input name="password" type="password" placeholder="password"  id="pass1"/>
         <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                  <div id="error-nwl"></div>
        

•          <input name="password" type="password" placeholder="password"  id="pass1"/>
           <input name="repeatpassword" type="password" placeholder="confirm password" id="pass2" onkeyup="checkPass(); return false;" />
                    <div id="error-nwl"></div>
          

  8: Xác nhận bổ sung. Trong trường hợp này, nó được sử dụng để thêm xác thực để biến đổi cả hai trường khớp.

Xin lỗi vì thiếu tài liệu.

Lưu ý:

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

function checkPass()
{
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
    var message = document.getElementById('error-nwl');
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    // You start by checking if they match
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "ok!"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " These passwords don't match"
    }
	// And then that messages gets removed by the result of the length check
    // Also, pass1.length is undefined
    if(pass1.length > 5){
        pass1.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "character number ok!"
    }else{
        pass1.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = " you have to enter at least 6 digit!"
    }
}

Làm cách nào để biết tên người dùng và mật khẩu JavaScript của tôi?

} khác nếu (mật khẩu.length

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

// kiểm tra trường mật khẩu trống ..