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

我有一个验证密码复杂性的函数。它在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];

        }
    });

});

这是我正在使用的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>

密码必须满足以下要求：

至少一个字母

至少一个大写字母

至少一个数字

至少有一个特殊字符
至少应8个字符

您在firefox和不在chrome上的edge浏览器上面临的确切问题是什么Firefox@ColdCerberus我认为CSSStyleSheet是受支持的，但所采用的样式表不受支持。您可以使用此polyfill，。-><代码>https://github.com/calebdwilliams/construct-style-sheets

            <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>