如何使此JavaScript脚本与所有浏览器交叉兼容？

Question

我有这个功能，可以验证密码的复杂性。它可以在Chrome上运行，但不能在Firefox或Edge上运行。关于如何使其与所有浏览器兼容，我是否有任何建议。

这是我从HTML调用的JavaScript函数。

JavaScript

$(document).ready(function () {

    function resetFunction() {
        $('#length').removeClass('valid').addClass('invalid');
        $('#letter').removeClass('valid').addClass('invalid');
        $('#capital').removeClass('valid').addClass('invalid');
        $('#number').removeClass('valid').addClass('invalid');
        $('#character').removeClass('valid').addClass('invalid');
    }

    $('input[type=password]').click(function () {
        //Set password variable
        var pswd = $(this).val();

        if (pswd.length < 1) {
            resetFunction();
        }

        if (pswd.length < 8) {
            $('#length').removeClass('valid').addClass('invalid');
        } else {
            $('#length').removeClass('invalid').addClass('valid');
        }

        //validate letter
        if (pswd.match(/[A-z]/)) {
            $('#letter').removeClass('invalid').addClass('valid');
        } else {
            $('#letter').removeClass('valid').addClass('invalid');
        }

        //validate capital letter
        if (pswd.match(/[A-Z]/)) {
            $('#capital').removeClass('invalid').addClass('valid');
        } else {
            $('#capital').removeClass('valid').addClass('invalid');
        }

        //validate number
        if (pswd.match(/\d/)) {
            $('#number').removeClass('invalid').addClass('valid');
        } else {
            $('#number').removeClass('valid').addClass('invalid');
        }

        //validate special character
        if (pswd.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/)) {
            $('#character').removeClass('invalid').addClass('valid');
        } else {
            $('#character').removeClass('valid').addClass('invalid');
        }
    })

    $('input[type=password]').keyup(function () {
        //Set password variable
        var pswd = $(this).val();

        if (pswd.length < 1) {
            resetFunction();
        }

        if (pswd.length < 8) {
            $('#length').removeClass('valid').addClass('invalid');
        } else {
            $('#length').removeClass('invalid').addClass('valid');
        }

        //validate letter
        if (pswd.match(/[A-z]/)) {
            $('#letter').removeClass('invalid').addClass('valid');
        } else {
            $('#letter').removeClass('valid').addClass('invalid');
        }

        //validate capital letter
        if (pswd.match(/[A-Z]/)) {
            $('#capital').removeClass('invalid').addClass('valid');
        } else {
            $('#capital').removeClass('valid').addClass('invalid');
        }

        //validate number
        if (pswd.match(/\d/)) {
            $('#number').removeClass('invalid').addClass('valid');
        } else {
            $('#number').removeClass('valid').addClass('invalid');
        }

        //validate special character
        if (pswd.match(/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/)) {
            $('#character').removeClass('invalid').addClass('valid');
        } else {
            $('#character').removeClass('valid').addClass('invalid');
        }

    }).focus(function () {
        const sheet = new CSSStyleSheet();

        sheet.replaceSync('#pswd_info::before {top: 100px}');
        sheet.replaceSync('#pswd_info {top: 100px}');

        // Apply the stylesheet to a document:
        document.adoptedStyleSheets = [sheet];

        $('#pswd_info').show();

    }).blur(function () {
        $('#pswd_info').hide();

    });

    $("#PasswordTBN").click(function () {
        // Create our shared stylesheet:
        const sheet = new CSSStyleSheet();

        var $this = $(this);
        if ($this.data('clicked')) {

            sheet.replaceSync('#pswd_info::before {top: 200px}');
            sheet.replaceSync('#pswd_info {top: 200px}');

            // Apply the stylesheet to a document:
            document.adoptedStyleSheets = [sheet];

        }
        else {
            $this.data('clicked', true);

            sheet.replaceSync('#pswd_info::before {top: 200px}');
            sheet.replaceSync('#pswd_info {top: 200px}');

            // Apply the stylesheet to a document:
            document.adoptedStyleSheets = [sheet];
        }
    });

    $("#PasswordTB").click(function () {
        // Create our shared stylesheet:
        const sheet = new CSSStyleSheet();

        var $this = $(this);
        if ($this.data('clicked')) {

            sheet.replaceSync('#pswd_info::before {top: 50px}');
            sheet.replaceSync('#pswd_info {top: 50px}');

            //Apply the stylesheet to a document:
            document.adoptedStyleSheets = [sheet];

        }
        else {
            $this.data('clicked', true);

            sheet.replaceSync('#pswd_info::before {top: 50px}');
            sheet.replaceSync('#pswd_info {top: 50px}');

            //Apply the stylesheet to a document:
            document.adoptedStyleSheets = [sheet];

        }
    });

});

我还包括了CSS文件。

CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#pswd_info {
    display: none;
}

#pswd_info {
    position: absolute;
    /*bottom: 0px;*/
    /*bottom: 0px\9; /* IE Specific */
    right: 0%;
    width: 250px;
    padding: 15px;
    background: #fefefe;
    font-size: .875em;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
    z-index: 10;
}

    #pswd_info h4 {
        margin: 0 0 10px 0;
        padding: 0;
        font-weight: normal;
    }

    #pswd_info::before {
        content: "\25B2";
        position: absolute;
        top: -12px;
        left: 45%;
        font-size: 14px;
        line-height: 14px;
        color: #ddd;
        text-shadow: none;
        display: block;
    }

.invalid {
    background: url(../Images/invalid.png) no-repeat 0 50%;
    padding-left: 22px;
    line-height: 24px;
    color: #ec3f41;
}

.valid {
    background: url(../Images/valid.png) no-repeat 0 50%;
    padding-left: 22px;
    line-height: 24px;
    color: #3a7d34;
}

这是我正在使用的HTML文件。密码字段处于活动状态时，应激活该功能。

HTML

            <input type="password" placeholder="Password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="Please enter a valid Password" name="passwordCreate" id="PasswordTB" runat="server" />
            <p class="show_hide" id="show_hide" onmouseover="showPassword()" onmouseout="showPassword()"><i class="fa fa-eye fa-lg"></i></p>

            <!-- The password box that indicates is password meets the requirements -->
            <div id="pswd_info">
                <h4>Password must meet the following requirements:</h4>
                <ul>
                    <li id="letter" class="invalid">At least <strong>one letter</strong></li>
                    <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
                    <li id="number" class="invalid">At least <strong>one number</strong></li>
                    <li id="character" class="invalid">At least <strong>one special character</strong></li>
                    <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
                </ul>
            </div>