フィールドが空の場合はJavascriptパスワードの検証をスキップ

Question

これはうまくいくが、パスワードフィールドを空白のままにしておくと無視されます。

ユーザーは、パスワードを変更しなくても情報を更新できるようにしたいと考えています。パスワードフィールドを空白のままにしておくと、パスワードは同じままです。

document.addEventListener("DOMContentLoaded", function() { 

    // JavaScript form validation 

    var checkPassword = function(str) 
    { 
     var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/; 
     return re.test(str); 
    }; 

    var checkForm = function(e) 
    { 

     if(this.pwd1.value != "" && this.pwd1.value == this.pwd2.value) { 
     if(!checkPassword(this.pwd1.value)) { 
      alert("The password you have entered is not valid!"); 
      this.pwd1.focus(); 
      e.preventDefault(); 
      return; 
     } 
     } else { 
     alert("Error: Please check that you've entered and confirmed your password!"); 
     this.pwd1.focus(); 
     e.preventDefault(); 
     return; 
     } 
    }; 

    var add_employee_form = document.getElementById("add_employee_form"); 
    add_employee_form.addEventListener("submit", checkForm, true); 

    // HTML5 form validation 

    var supports_input_validity = function() 
    { 
     var i = document.createElement("input"); 
     return "setCustomValidity" in i; 
    } 

    if(supports_input_validity()) { 


     var pwd1Input = document.getElementById("field_pwd1"); 
     var pwd1Rule = "Password must contain at least 6 characters, including UPPER/lowercase and numbers."; 
     pwd1Input.setCustomValidity(pwd1Rule); 

     var pwd2Input = document.getElementById("field_pwd2"); 
     var pwd2Rule = "Please enter the same Password as above."; 

     // input onchange event handlers 


     pwd1Input.addEventListener("change", function() { 
     this.setCustomValidity(this.validity.patternMismatch ? pwd1Rule : ""); 
     if(this.checkValidity()) { 
      pwd2Input.pattern = this.value; 
      pwd2Input.setCustomValidity(pwd2Rule); 
     } else { 
      pwd2Input.pattern = this.pattern; 
      pwd2Input.setCustomValidity(""); 
     } 
     }, false); 

     pwd2Input.addEventListener("change", function() { 
     this.setCustomValidity(this.validity.patternMismatch ? pwd2Rule : ""); 
     }, false); 

    } 

    }, false); 

</script>   

Answer 1

がトップでこれを持っているあなたの機能を変更します。値はfalseを返しますjavascriptの

if(!this.pwd1.value) return; 

をヌルまたはブランクので、これは偽の場合に返さ言います。

のフル機能：まさに "機能の開始" である

var checkForm = function(e) 
    { 
     if(!this.pwd1.value) return; 
     if(this.pwd1.value != "" && this.pwd1.value == this.pwd2.value) { 
     if(!checkPassword(this.pwd1.value)) { 
      alert("The password you have entered is not valid!"); 
      this.pwd1.focus(); 
      e.preventDefault(); 
      return; 
     } 
     } else { 
     alert("Error: Please check that you've entered and confirmed your password!"); 
     this.pwd1.focus(); 
     e.preventDefault(); 
     return; 
     } 
    };