时间戳

首页 > 解决方案 > 函数返回 bool 时如何使用不同的 SweetAlert？

javascript - 函数返回 bool 时如何使用不同的 SweetAlert？

问题描述

我正在尝试为网站设置联系页面，并且我想在发送电子邮件时（在同一页面上）添加一个成功的 sweetalert 弹出窗口，并在留下任何字段时添加一个错误警报空，但即使函数（评估字段是否已填充）返回 false（留下一个空字段），它也会继续显示成功警报。目前，该网站的联系页面通过它的contact.html文件和一个单独的文件运行良好，该mail.php文件保存和发送数据，同时在重定向回 html 页面的 php 页面上发送时显示 sweetalert 成功消息。但我希望能够在同一（contact.php）页面上显示 sweetalert，同时根据函数将返回的 bool 值显示指定的警报。在这里您可以找到php 联系页面来测试结果。

PHP：

<?php 
global $name;
global $email; 
global $message;
global $subject;
?>

<?php 

    if (isset($_POST['name'])) {
        $name = $_POST['name'];
    }
    if (isset($_POST['email'])) {
        $email = $_POST['email'];
    }
    if (isset($_POST['message'])) {
        $message = $_POST['message'];
    }
    if (isset($_POST['subject'])) {
        $subject = $_POST['subject'];
    }

    $formcontent="From: $name \n Message: $message";
    $recipient = "legonutts@gmail.com";
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

?>

HTML： 

<html>
<body>
    <main>
        <section>
            <div class="container">
                <form onsubmit="checkvalidation();" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
                    <div class="form-group">
                        <label>
                            <strong>Name</strong>
                        </label>
                        <input class="form-control" type="text" name="name" id="name">
                    </div>
                    <div class="form-group">
                        <button class="btn btn-warning btn-block" type="submit" value="Send" onclick="return check();">
                            Send
                        </button>
                    </div>
                </form>
            </div>
        </section>
    </main>
</body>
</html>

JS： 

function checkvalidation(){

        function SweetAlertSuccess(){
            Swal.fire(
                '¡Mensaje enviado!',
                '¡Gracias por contactarnos!',
                'success'
            )
        }

        function SweetAlertError(){
            Swal.fire({
                icon: 'error',
                title: '¡Faltan llenar algunos campos!',
                text: 'Los campos requeridos serán remarcados.'
            })
        }

        if ( check() ){
            SweetAlertSuccess();
        }
        else{
            SweetAlertError();
        }

    }

    function check(){

        var name = document.getElementById("name");
        var subject = document.getElementById("subject");
        var email = document.getElementById("email");
        var message = document.getElementById("message");

        var regx = /^([a-z 0-9\.-_]+)@([a-z 0-9-_]+).([a-z]{2,8})(.[a-z]{2,8})?$/;
        if (regx.test())
        {
            email.style.border = "solid 3px #f03535";
            document.getElementById("lblemail2").style.display = "table-row";
            document.getElementById("bremail2").style.display = "table-row";
        }


        if (name.value.trim() == "" && subject.value.trim() == "" && email.value.trim() == "" && message.value.trim() == "" )
        {

            name.style.border = "solid 3px #f03535";
            subject.style.border = "solid 3px #f03535";
            email.style.border = "solid 3px #f03535";
            message.style.border = "solid 3px #f03535";
            document.getElementById("lblname").style.display = "table-row";
            document.getElementById("lblsubject").style.display = "table-row";
            document.getElementById("lblemail").style.display = "table-row";
            document.getElementById("lblmessage").style.display = "table-row";
            document.getElementById("brname").style.display = "table-row";
            document.getElementById("brsubject").style.display = "table-row";
            document.getElementById("bremail").style.display = "table-row";
            document.getElementById("brmessage").style.display = "table-row";
            return false;

        }
        else
        {
            return true;
        }

    }

当函数 check() 返回 false 时，我希望弹出警报是错误警报，但会显示成功警报（仅当它返回 true 时才会发生）

更新：

我还试图使联系人页面在 sweetalert 完成弹出之前不刷新，并且仅在用户单击警报上的 OK 按钮后刷新（发送消息时）（如此html 联系人页面的示例所示那是一个.html和一个单独的.php文件一起工作），其代码如下：

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $formcontent="From: $name \n Message: $message";
    $recipient = "legonutts@gmail.com";
    $subject = $_POST['subject'];
    $mailheader = "From: $email \r\n";
    mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");

?>

<body onpageshow="SweetAlertSuccess()">

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script src="sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
<script src="sweetalert2.min.js"></script>

<script>

    function SweetAlertSuccess(){
        Swal.fire({
            title: '¡Mensaje enviado!',
            text: "¡Gracias por contactarnos!",
            icon: 'success',
            showCancelButton: false,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'OK'
        }).then((result) => {
            if (result.value) {
                location.href="contacto.html";
            }
        })
    }

</script>

标签： javascriptphphtmlsweetalert2

解决方案

如果我读错了您的检查功能，请给我反馈，但我想您希望它在正则表达式邮件检查或空检查失败时提醒错误？

function check(){

        var name = document.getElementById("name");
        var subject = document.getElementById("subject");
        var email = document.getElementById("email");
        var message = document.getElementById("message");

        var isValid = true;

        var regx = /^([a-z 0-9\.-_]+)@([a-z 0-9-_]+).([a-z]{2,8})(.[a-z]{2,8})?$/;
        // if regex test fails, email is not valid
        if (!regx.test(email.value))
        {
            email.style.border = "solid 3px #f03535";
            document.getElementById("lblemail2").style.display = "table-row";
            document.getElementById("bremail2").style.display = "table-row";
            isValid = false;
        }

        // if name subject or message is empty, its not valid
        if (name.value.trim() == "" && subject.value.trim() == "" && email.value.trim() == "" && message.value.trim() == "" )
        {

            name.style.border = "solid 3px #f03535";
            subject.style.border = "solid 3px #f03535";
            email.style.border = "solid 3px #f03535";
            message.style.border = "solid 3px #f03535";
            document.getElementById("lblname").style.display = "table-row";
            document.getElementById("lblsubject").style.display = "table-row";
            document.getElementById("lblemail").style.display = "table-row";
            document.getElementById("lblmessage").style.display = "table-row";
            document.getElementById("brname").style.display = "table-row";
            document.getElementById("brsubject").style.display = "table-row";
            document.getElementById("bremail").style.display = "table-row";
            document.getElementById("brmessage").style.display = "table-row";
            isValid = false;
        }

        return isValid;

}

要阻止提交发生错误，您onSubmit必须返回false。

async function checkvalidation(submitEvent){
        // this prevents the form from submitting
        submitEvent.preventDefault();

        async function SweetAlertSuccess(){
            return Swal.fire(
                '¡Mensaje enviado!',
                '¡Gracias por contactarnos!',
                'success'
            )
        }

        function SweetAlertError(){
            Swal.fire({
                icon: 'error',
                title: '¡Faltan llenar algunos campos!',
                text: 'Los campos requeridos serán remarcados.'
            })
        }

        if ( check() ){
            await SweetAlertSuccess();
            // should only submit after 3 seconds of showing success
            setTimeout(function(){ 
              // give your form the id myForm for this to work
              document.getElementById("myForm").submit();
            }, 3000);

        }
        else{
            SweetAlertError();
        }

}

推荐阅读