提交Form表单,submit之前做js判断处理

旧城等待， 2022-05-12 07:08 257阅读 0赞

原文地址：[https://blog.csdn.net/m\_nanle\_xiaobudiu/article/details/79667661][https_blog.csdn.net_m_nanle_xiaobudiu_article_details_79667661]

效果:

![70][]

在点击提交按钮时,首先进行js判断, 如果不符合条件,则alert出提示信息,并return false.

主要点就在于给form表单添加一个onsubmit事件. 在onsubmit事件中定义的函数里进行js验证处理.

代码 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="/static/layui/css/layui.css">
        <script src="/static/layui/jquery.min.js"></script>
        <script src="/static/layui/layui.js"></script>
    </head>
    <body>
    <div id="up_image">
        <form action="" method="post" enctype="multipart/form-data" onsubmit="return verify()">
            <br>
            <br>
            <br>
            <p>请上传发票:  <input type="file" name="invo" value="" id="file"></p><br/><br />
            <p>快递单号: <input type="text" name="OrderNu" value="" id="OrderNu" /></p><br />
            <p>快递公司: <input type="text" name="Expre" value="" id="Expre"/></p><br />
            <input type="submit" value="提交" style="width: 140px;height:40;color:red;margin-top: 30px;margin-left: 130px;">
        </form>
    </div>
    </body>
    </html>
    
    <script type="text/javascript">
        function verify() {
            var file = $("#file").val();
            var order = $("#OrderNu").val();
            var Expre = $("#Expre").val();
            if (file == '' || file==null) {
                alert('请上传发票');
                return false;
            }
            if(order==''){
                alert('请补全快递单号');
                return false;
            }
            if(Expre==''){
                alert('请填写快递公司');
                return false;
            }
        }
    </script>

[https_blog.csdn.net_m_nanle_xiaobudiu_article_details_79667661]: https://blog.csdn.net/m_nanle_xiaobudiu/article/details/79667661
[70]: /images/20220512/b21d70143bed45da8dc335e17d7184eb.png