將這兩個功能合而為一

Question

大家好，我有一個密碼驗證程序，我遇到的問題很嚴重，它很長，我認為可以縮短並簡化它。

有人可以幫助我簡化它。 我在談論checkValidPassword（）函數。

function check(input) {
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('Password Must be Matching.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
        // check the length of the password
        checkValidPassword(input);
    }
}


function checkValidPassword(input) {
    var password = document.getElementById('password');
    var confirm_password = document.getElementById('confirm password');
    if (password.value.length < 8) {
        password.setCustomValidity('Password must contain at least 8 characters!');
    } else {
        var re = /[0-9]/;
        if (!re.test(password.value)) {
            password.setCustomValidity('password must contain at least one number (0-9)!');
        } else {
            password.setCustomValidity("");
        }
    }
}

而即時通訊試圖為用戶實施一種方式也必須包括至少一個數字。 我在想

str.match(/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/)

我可以在包含$的if語句中包括它來象征和檢查字符嗎？

if(password.value.length < 8 && str.match(/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])([a-zA-Z0-9]{8,})$/)) {

Answer 1

這本質上是一個代碼審查問題，但是好吧...我將您的函數重寫為：

function checkPassword() {

    var password = document.getElementById('password');
    var confirm_password = document.getElementById('confirm password');

    if (password.value != confirm_password.value) {
        password.setCustomValidity('Password Must be Matching.');
        return false;
    }

    if(password.value.length < 8 ) {
        password.setCustomValidity('Password must contain at least 8 characters!');
        return false;
    }

    if(!/[0-9]/.test(password.value)) {
        password.setCustomValidity('password must contain at least one number (0-9)!');
        return false;
    }

    return true;
}

基本上，單獨檢查每個條件，如果條件失敗，則立即返回，從而避免出現額外的縮進（“早期退出”）。 這有點冗長，但比怪物的正則表達式更具可讀性，尤其是在您不確定其作用時。

Answer 2

我設法弄清楚了，我將它們彼此組合在一起，只是將它們彼此組合在一起。

function ValidatePassword(pass, confirm_pass) {
    if (pass.value != confirm_pass.value || pass.value == "" || confirm_pass.value == "") {
        confirm_pass.setCustomValidity("the Passwords do not match");
        pass.setCustomValidity("the Passwords do not match");
    } else {
      if(pass.value.match(/(?=^.{8,30}$)([a-zA-Z]+[0-9])$/)) {

            pass.setCustomValidity("");
            confirm_pass.setCustomValidity("");


        } else {
             pass.setCustomValidity("the password doesnt have numbers");
            confirm_pass.setCustomValidity("the password doesnt have numbers");
        }
    }
}

這是我使表格看起來像的樣子：

<form>

        password
        <input id="pass" type="password" required="" placeholder="Password" />
        <br> confirm
        <input id="confirm_pass" type="password" required="" placeholder="confirm" onfocus="ValidatePassword(document.getElementById('pass'), this);" oninput="ValidatePassword(document.getElementById('pass'), this);" />
        <br> username :
        <input id="username" required="" type="text">
        <br>
        <button class="btnform" name="register" type="submit">Complete Registration</button>
</form>