javascript - 如果 JS/JQuery 的验证码正确，则显示 PDF

Question

我有一个简单的表格，如果验证码正确，我想显示一个 pdf URL。所以用户填写必填字段并输入验证码的代码，然后点击提交，这将打开一个pdf（只有验证码正确）。

下面是我的代码以及验证码。

   $(window).on('load', function () {
            $('.lds-ellipsis').fadeOut();
            $('.preloader').delay(333).fadeOut('slow');
            $('body').delay(333);
        });
        $('#email').on('change', function () {
            if (!validateEmail($(this).val())) {
                $('#errEmail').html('<span style="color: red;"><i class="ion-close"></i> Invalid email address.</span>');
                $(this).val('');
            } else {
                $('#errEmail').html('');
            }
        });

        //password verification
        $('#cpwd').on('change', function () {
            if ($(this).val() != $('#pwd').val()) {
                $('#errPwd').html('<span style="color: red;"><i class="ion-close"></i> Password not matched.</span>');
                $(this).val('');
            } else {
                $('#errPwd').html('');
            }
        });


        //email validation
        function validateEmail(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        //allow only number input
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 47 && charCode < 58 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 && charCode < 41);
        }


        //allow only number input
        function isAlpha(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 64 && charCode < 91 || charCode > 96 && charCode < 123 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 && charCode < 41);
        }

        //generate captcha
        function generateCaptcha(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
            return result;
        }

        //default captcha
        $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));

        $('.captcha-reload').on('click', function () {
            $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));
        });

        //check captcha
        $('#captcha-input').on('change', function () {
            if ($(this).val() != $('.dynamic-code').text()) {
                $('#errCaptcha').html('<span style="color: red;"><i class="ion-close"></i> Code is wrong.</span>');
                $(this).val('');
            } else {
                $('#errCaptcha').html('');
            }
            
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <div class="col-11 col-md-10 col-lg-9 col-xl-8 mx-auto">
                              
                                <form id="loginForm" method="post">
                                    <div class="form-group font-weight-500">
                                        <label for="docs">Number docs*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="docs" required placeholder="...">
                                    </div>
                                    <div class="form-group font-weight-500">
                                        <label for="other">Other number*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="other" required placeholder="...">
                                    </div>

                                    <div class="form-group font-weight-500">
                                        <label for="pwd">Code from image*:</label>

                                        <!-- input captcha -->
                                        <div class="captcha-code">
                                            <div class="code">
                                                <div class="dynamic-code"></div>
                                            </div>
                                            <div class="captcha-reload">
                                                <i class="ion-ios-loop-strong"></i>
                                            </div>
                                        </div>
                                        <div class="captcha-input">
                                            <input type="text" class="form-control form-control bg-light border-light"
                                                id="captcha-input" required autocomplete="off"
                                                placeholder="Enter code from image...">
                                            <span id="errCaptcha"></span>
                                        </div>

                                    </div>
                                    
                                    <button type="submit" class="btn btn-default">Submit</button>

                                </form>
                            </div>

所以我想知道如何在这个提交按钮上附加一个pdf，或者如果有更好的方法，请随时告诉我，如何实现这个？

有人可以帮我解决这个问题吗？

标签： javascripthtmljquery

Answer 1

更新 HTML：在底部添加一个 DIV。

<div id="#pdf"></div>

更新 jQuery 代码：

$('#captcha-input').on('change', function () {
            if ($(this).val() != $('.dynamic-code').text()) {
                $('#errCaptcha').html('<span style="color: red;"><i class="ion- 
                close"></i> Code is wrong.</span>');
                $(this).val('');
                $('#pdf').remove();
            } else {
                $('#pdf').append('<p>Show What Ever You want</p>');
                $('#errCaptcha').html('');
            }
            
        });

$(window).on('load', function () {
            $('.lds-ellipsis').fadeOut();
            $('.preloader').delay(333).fadeOut('slow');
            $('body').delay(333);
        });
        $('#email').on('change', function () {
            if (!validateEmail($(this).val())) {
                $('#errEmail').html('<span style="color: red;"><i class="ion-close"></i> Invalid email address.</span>');
                $(this).val('');
            } else {
                $('#errEmail').html('');
            }
        });

        //password verification
        $('#cpwd').on('change', function () {
            if ($(this).val() != $('#pwd').val()) {
                $('#errPwd').html('<span style="color: red;"><i class="ion-close"></i> Password not matched.</span>');
                $(this).val('');
            } else {
                $('#errPwd').html('');
            }
        });


        //email validation
        function validateEmail(email) {
            var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            return re.test(email);
        }

        //allow only number input
        function isNumber(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 47 && charCode < 58 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 && charCode < 41);
        }


        //allow only number input
        function isAlpha(evt) {
            evt = (evt) ? evt : window.event;
            var charCode = (evt.which) ? evt.which : evt.keyCode;
            return (charCode > 64 && charCode < 91 || charCode > 96 && charCode < 123 || charCode == 8 || charCode == 9 || charCode == 46 || charCode > 36 && charCode < 41);
        }

        //generate captcha
        function generateCaptcha(length, chars) {
            var result = '';
            for (var i = length; i > 0; --i) result += chars[Math.round(Math.random() * (chars.length - 1))];
            return result;
        }

        //default captcha
        $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));

        $('.captcha-reload').on('click', function () {
            $('.dynamic-code').text(generateCaptcha(5, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'));
        });

        //check captcha
        $('#captcha-input').on('change', function () {
            if ($(this).val() != $('.dynamic-code').text()) {
                $('#errCaptcha').html('<span style="color: red;"><i class="ion-close"></i> Code is wrong.</span>');
                $(this).val('');
                $('#pdf').html('');
            } else {
                $('#pdf').append('<p>WhatEver You want to show put here</p>');
                $('#errCaptcha').html('');
            }
            
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <div class="col-11 col-md-10 col-lg-9 col-xl-8 mx-auto">
                              
                                <form id="loginForm" method="post">
                                    <div class="form-group font-weight-500">
                                        <label for="docs">Number docs*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="docs" required placeholder="...">
                                    </div>
                                    <div class="form-group font-weight-500">
                                        <label for="other">Other number*
                                        </label>
                                        <input type="number" class="form-control bg-light border-light"
                                            id="other" required placeholder="...">
                                    </div>

                                    <div class="form-group font-weight-500">
                                        <label for="pwd">Code from image*:</label>

                                        <!-- input captcha -->
                                        <div class="captcha-code">
                                            <div class="code">
                                                <div class="dynamic-code"></div>
                                            </div>
                                            <div class="captcha-reload">
                                                <i class="ion-ios-loop-strong"></i>
                                            </div>
                                        </div>
                                        <div class="captcha-input">
                                            <input type="text" class="form-control form-control bg-light border-light"
                                                id="captcha-input" required autocomplete="off"
                                                placeholder="Enter code from image...">
                                            <span id="errCaptcha"></span>
                                        </div>

                                    </div>
                                    
                                    <button type="submit" class="btn btn-default">Submit</button>

                                </form>
                            </div>
<div id="pdf"></div>