regex - 使用 VUE 和 rexex 显示错误后密码验证失败

Question

我有一个vue应用程序，并且我有一个更改密码页面，我正在尝试向我的新密码添加验证input。

条件是一种或多种

• 除空格外的任何特殊字符
• 大写字母
• 数字
• 最少 6 位数
• 最多 15 位数字

我有以下regex

let nwPwChars = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{6,15}$/;

我遇到的问题是，如果我输入“Password00！” 它第一次input验证并且工作正常，但是如果我输入abc然后制表符，它会失败我的验证并显示我的错误消息但是如果我在此之后继续满足我的所有条件（acbd01！）它仍然没有通过我的验证看到我的控制台，它一到 6 就返回null

第一次做没有​​失败通过

HTML

<form>
    <div class="form-group d-flex justify-content-center">
        <div class="col-4">
            <label for="newPw">New password <span class="text-danger">*</span></label>
            <div class="input-group">
                <input id="newPw" ref="newPw" v-model="newPw" class="form-control" :class="newPwMatchChecker" :type="newPwFieldType" @input="newPWValCheck_1" @blur="newPWValCheck_2"
                        @paste.prevent placeholder="Enter your new password">
                <div class="input-group-append">
                    <button class="btn input-group-text" type="button" @click="showHideNewPw" :disabled="this.newPw.length === 0" tabindex="-1">
                        <i class="far" :class="newPwImg" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div v-if="nwPwError" class="form-group" style="margin-top: -10px">
        <div class="col d-flex justify-content-center">
            <div class="text-danger">The password entered does not match the criteria above. Please try again.</div>
        </div>
    </div>
    <div class="row d-flex justify-content-center">
        <div class="col-4">
            <label for="confirmNewPw">Confirm new password <span class="text-danger">*</span></label>
            <div class="input-group">
                <input id="confirmNewPw" ref="confirmNewPw" v-model="confirmNewPw" class="form-control" :class="confirmPwMatchChecker" :type="confirmNewPwFieldType"
                        :disabled="disableConfirmPwInput" @paste.prevent placeholder="Confirm your new password">
                <div class="input-group-append">
                    <button class="btn input-group-text" type="button" @click="showHideConfirmNewPw" :disabled="this.newPw.length === 0" tabindex="-1">
                        <i class="far" :class="confirmNewPwImg" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div v-if="confirmPwError" class="row mt-1">
        <div class="col d-flex justify-content-center">
            <div class="text-danger">The passwords entered do not match. Please try again.</div>
        </div>
    </div>
</form>

VUE代码

computed: {
    newPwMatchChecker() {
        if (this.nwPwError) {
            this.$refs.newPw.focus();

            return 'error';
        } else if (this.newPwValidated) {
            return 'mathced';
        }

        return ''
    },

    confirmPwMatchChecker() {
        this.confirmPwError = false;
        
        if (this.confirmNewPw.length === this.newPw.length && this.confirmNewPw != this.newPw) {
            this.confirmPwError = true;
            this.$refs.confirmNewPw.focus();

            return 'error';
        } else if (this.confirmNewPw.length >= 6 && this.confirmNewPw === this.newPw) {
            return 'matched';
        }

        return ''
    },
},

method: {
    newPWValCheck_1(e) {
        let input = e.target;

        let nwPwChars = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{6,15}$/;
        this.nwPwError = false;
        input.classList.remove('error');
        this.confirmPwError = false;
        this.confirmNewPw = '';

        console.log('1', this.newPw.length)
        console.log('2', this.newPw.length >= 6)
        console.log('3', this.newPw.length <= 15)
        console.log('4', this.newPw.match(this.nwPwChars))
        console.log('5', (this.newPw.length >=6 && this.newPw.length <= 15) && this.newPw.match(nwPwChars))
        console.log('6', this.newPw.length >=6 && this.newPw.length <= 15 && this.newPw.match(nwPwChars))
        
        if ((this.newPw.length >=6 && this.newPw.length <= 15) && this.newPw.match(nwPwChars)) {
            this.newPwValidated = true;
        } else {
            this.newPwValidated = false;
        }
    },

    newPWValCheck_2() {
        if (!this.newPwValidated) {
            this.nwPwError = true;
        } else {
            this.nwPwError = false;
        }
    }
}

第一次输入符合条件的密码可以让我确认input

regex第一次 失败（仅输入3个字符）按预期显示错误

然后继续输入密码以匹配条件应该通过但没有，它再次重新显示我的错误

标签： regexvue.jsvuejs2