Password confirm sử dụng Javascript

Bắt lỗi passwword nhập lại có trùng khớp với password đã nhập ban đầu hay không?

Mã HTML

    <div class="tutorialWrapper">
          <form>
              <div class="fieldWrapper">
                  <label for="pass1">Password:</label>
                  <input type="password" name="pass1" id="pass1">
              </div>
              <div class="fieldWrapper">
                  <label for="pass2">Confirm Password:</label>
                  <input type="password" name="pass2" id="pass2" onkeyup="checkPass(); return false;">
                  <span id="confirmMessage" class="confirmMessage"></span>
              </div>
          </form>
      </div>

Mã CSS

    .tutorialWrapper{
      width: 100%;
      height: auto;
    }
    .tutorialWrapper form{
      background-color: #ffc;
      border: 1px solid #cc9;
      padding: 10px;
      font-family: verdana;
      width: 75%;
      font-size: 13px;
    }
    .fieldWrapper{
      margin: 2px 0 2px 0;
      padding: 0;
    }
    .tutorialWrapper label{
      float: left;
      text-align: right;
      margin: 0 5px 0 0;
      width: 30%;
    }
    .tutorialWrapper input{
      width: 200px;
      border: 1px solid #cc9;
    }
    .confirmMessage{
      margin: 0;
      padding: 0;
      font-size: .8em;
    }
    input {
         padding: 3px;
    }

Mã Javascript

    function checkPass()
    {
        var pass1 = document.getElementById('pass1');
        var pass2 = document.getElementById('pass2');
        var message = document.getElementById('confirmMessage');
        var goodColor = "#66cc66";
        var badColor = "#ff6666";
        if(pass1.value == pass2.value){
            pass2.style.backgroundColor = goodColor;
            message.style.color = goodColor;
            message.innerHTML = "Passwords Trùng khớp!"
        }else{
            pass2.style.backgroundColor = badColor;
            message.style.color = badColor;
            message.innerHTML = "Passwords Không trùng khớp!"
        }
    }
Xem ví dụ »