效果:

在点击提交按钮时,首先进行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" οnsubmit="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>
版权声明：本文为CSDN博主「haveyb」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/m_nanle_xiaobudiu/article/details/79667661

提交Form表单,submit之前做js判断处理的更多相关文章

  1. 如何通过submit提交form表单获取后台传来的返回值

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_34651764/article/details/76373846 小伙伴是不是遇到过这样的问题 ...

  2. Ajax提交Form表单的一种方法

    待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...

  3. Ajax提交form表单内容和文件（jQuery.form.js）

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

  4. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  5. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  6. 使用ajax提交form表单，包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  7. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

  8. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  9. 在IOS设备上POST提交form表单，后台接收不到值怎么办？

    原文:https://blog.csdn.net/xhaimail/article/details/90440029 最近在工作上遇到一个奇葩问题,在Android和Windows平台上做请求时参数都 ...

随机推荐

  1. Oracle分析函数/排名函数/位移函数/同比环比

    分析函数 作用:分析函数可以在数据中进行分组,然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计值.统计函数:MAX(字段名).MIN(字段名).AVG(字段名).SUM(字段名).CO ...

  2. 小白文-SpringMVC-解读DispatcherServlet源码

    SpringMVC 学习完Spring框架技术之后,差不多会出现两批人: 一批是听得云里雾里,依然不明白这个东西是干嘛的: 还有一批就是差不多理解了核心思想,但是不知道这些东西该如何去发挥它的作用. ...

  3. Qt：QThread

    0.说明 QThread提供了一种与平台无关的线程管理方法. 一个QThread对象管理一个线程.QThread通过run()方法启动线程.默认情况下,run()方法通过exec()启动一个事件循环, ...

  4. UnicodeDecodeError

    'gbk' codec can't decode byte 0x80 in position xx open文件时,添加参数'encoding='utf-8' 'utf-8' codec can't ...

  5. 无状态子域名爆破工具：ksubdomain

    概述 开源地址:https://github.com/knownsec/ksubdomain 二进制文件下载:https://github.com/knownsec/ksubdomain/releas ...

  6. 快速构建 React 开发环境

    使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...

  7. 【AIA】培训感悟

    最主要一个感悟,有钱了一定要买香港的保险.存个100万,年薪30就行,先把这个做目标.

  8. Spring Cloud Ribbon 中的 7 种负载均衡策略

    负载均衡通器常有两种实现手段,一种是服务端负载均衡器,另一种是客户端负载均衡器,而我们今天的主角 Ribbon 就属于后者--客户端负载均衡器. 服务端负载均衡器的问题是,它提供了更强的流量控制权,但 ...

  9. tp5 多文件上传

    路由: Route::post('imgs','task/task/uploads'); 控制器代码: // 多文件上传 public function uploads() { //接受参数 $dat ...

  10. KDT入门小讲

    KDT入门小讲 为了搞讲课两天搞出来的PPT,质量不高,随便看看 附:讲课用PPT 链接: https://pan.baidu.com/s/1qHea0fEhscAsQh8-Yu_j_A 提取码: 4 ...