无法使用Java验证确认密码字段

问题描述

我正在尝试验证表单中的各个字段，但是我的JavaScript出现了问题。当用户将重点放在“确认密码”字段上时，应检查密码字段是否有效（满足所有要求），如果有效，请检查密码是否匹配。如果两个都为true，则返回true。我的问题是，无论密码是否正确，我一直收到错误消息，提示我的密码无效。问题在于validateConfirmPassword（）函数。我相信这是一个简单的错误，但我似乎无法弄清楚。注意：我还没有完成编写所有javascript来验证所有字段的功能，因此会抛出一些错误，表明未找到某些元素。

JavaScript：

//input fields

const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const company = document.getElementById('company');
const email = document.getElementById('email');
const address = document.getElementById('address');
const address2 = document.getElementById('address2');
const city = document.getElementById('city');
const state = document.getElementById('state');
const zip = document.getElementById('zip');
const phone = document.getElementById('phone');
const cell = document.getElementById('cell');
const musicianType = document.getElementById('musicianType');
const musicianType2 = document.getElementById('musicianType2');
const password = document.getElementById('password');
const cnfPassword = document.getElementById('cnfPassword');
const securityQuestion = document.getElementById('securityQuestion');
const securityAnswer = document.getElementById('securityAnswer');
const pin = document.getElementById('pin');
const churchAffiliation1 = document.getElementById('churchAffiliation1');
const churchAffiliation2 = document.getElementById('churchAffiliation2');
const churchAffiliation3 = document.getElementById('churchAffiliation3');
const churchAffiliation4 = document.getElementById('churchAffiliation4');

//form

const form = document.getElementById('payment-form');


//validation colors
const green = '#4CAF50';
const red = '#F44336';

// validators

function validateFirstName() {
    //check if it is empty
    if (checkIfEmpty(firstName)) return;

    //check if it only has letters
    if (!checkIfOnlyLetters(firstName)) return;
    return true;
}

function validateLastName() {
    //check if it is empty
    if (checkIfEmpty(lastName)) return;

    //check if it only has letters
    if (!checkIfOnlyLetters(lastName)) return;
    return true;
}

function validatePassword() {
    //check if it is empty
    if (checkIfEmpty(password)) return;
    // Must be a certain length
    if (!meetLength(password,8,20)) return;
    // check password against character set
    // 1 - a
    // 2 - A
    // 3 - A  a  1
    // 4 - A  a  1  @
    if (!containsCharacters(password,4)) return;

    return true;
}

function validateConfirmPassword() {
    if (password.className !== 'valid') {
        setInvalid(cnfPassword,`Password must be valid`);
        return;
    }
    // check if passwords matched
    if (password.value !== cnfPassword.value) {
        setInvalid(cnfPassword,`Passwords must match`);
        return;
    } else {
        setValid(cnfPassword);
        
    }
    return true;
}
//Utility functions

function checkIfEmpty(field) {
    if (isEmpty(field.value.trim())) {
        //set field invalid
        setInvalid(field,`${field.name} must not be empty`);
        return true;
    } else {
        //set field valid
        setValid(field);
        return false;
    }
}


function isEmpty(value) {
    if (value === '') return true
    return false;
}

function setInvalid(field,message) {
    field.className = 'form-control'
    field.nextElementSibling.innerHTML = message;
    field.nextElementSibling.style.color = red;
}

function setValid(field) {
    field.className = 'form-control'
    field.nextElementSibling.innerHTML = '';
    field.nextElementSibling.style.color = green;
}

function checkIfOnlyLetters(field) {
    if (/[a-zAZ ]+$/.test(field.value)) {
        setValid(field);
        return true;
    } else {
        setInvalid(field,`${field.name} must contain only letters`)
        return false;
    }
}

function meetLength(field,minLength,maxLength) {
    if (field.value.length >= minLength && field.value.length) {
        setValid(field);
        return true;
    } else if (field.value.length < minLength) {
        setInvalid(field,`${field.name} must be at least ${minLength} characters long`);
        return false;
    } else {
        setInvalid(field,`${field.name} must not be longer than ${maxLength} characters`);
        return false;
    }

}

function containsCharacters(field,code) {
    let regEx;
    switch (code) {

        case 1:
            //letters
            regEx = /(?=.*[a-zA-Z])/;
            return matchWithRegEx(regEx,field,`Must contain at least 1 letter`);
        case 2:
            // letters and numbers
            regEx = /(?=.*\d)(?=.*[a-zA-Z])/;
            return matchWithRegEx(regEx,`Must contain at least 1 letter and 1 number`);
        case 3:
            //lowercase,uppercase and number
            regEx = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])/;
            return matchWithRegEx(regEx,`Must contain at least 1 uppercase letter,1 lowercase number,and 1 number`);
        case 4:
            //uppercase,lowercase,number and symbol
            regEx = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*\W)/;
            return matchWithRegEx(regEx,1 number and 1 symbol`);

        default:
            false;
    }
}

function matchWithRegEx(regEx,message) {
    if (field.value.match(regEx)) {
        setValid(field);
        return true;
    } else {
        setInvalid(field,message);
        return false
    }
}

表单标记：

<div class="panel panel-primary setup-content" id="step-2">
            <div class="panel-heading">
                <h3 class="panel-title">Account Security</h3>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Password</label>
                        <input maxlength="20" type="password" required class="form-control" name="Password" id="password" placeholder="Password" onfocusout="validatePassword()"/>
                        <ul class="input-requirements">
                            <li>Must be 8-20 characters long</li>
                            <li>Must contain at least 1 number</li>
                            <li>Must contain at least 1 uppercase letter</li>
                            <li>Must contain at least 1 lowercase letter </li>
                            <li>Must contain a special character (e.g. ! ; # * %)</li>
                        </ul>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Confirm Password</label>
                        <input maxlength="200" type="password" required="required" class="form-control" name="Confirm Password" id="cnfPassword" placeholder="Confirm Password" onfocusout="validateConfirmPassword()"/>
                        <small class="form-text"></small>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Security Question</label>
                        <select name="Security Question" id="securityQuestion" required class="form-control" onfocusout="validateSecurityQuestion()">
                            <option value="">Select</option>
                            @{
                                foreach (var secretquestion in Model.securityquestions)
                                {
                                    <option value="@secretquestion.id">@secretquestion.Question</option>
                                }
                            }
                        </select>
                        <small class="form-text"></small>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Security Answer</label>
                        <input maxlength="200" type="password" required="required" class="form-control" name="Security Answer" id="securityAnswer" placeholder="Confirm Password" onfocusout="validateSecurityAnswer()"/>
                        <small class="form-text"></small>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-12">
                        <label class="control-label">Account PIN</label>
                        <input maxlength="6" type="password" required="required" class="form-control" name="Pin" id="pin" placeholder="PIN" onfocusout="validatePin()"/>
                        <small class="form-text"></small>
                    </div>
                </div>
                <button class="btn btn-primary nextBtn pull-right" type="button">Next</button>

            </div>
        </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）