效果:

在点击提交按钮时,首先进行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. 简明Python教程 - 学习笔记

    1,第一步 cmd下运行python文件 :python 文件名.(在文件目录下) 退出python解释器:ctrl + z 或 exit() 回车 进入帮助模式:help(),退出:q 或 回车 2 ...

  2. OS模块的补充使用---执行终端命令

    Python基础至os模块 由于近期的项目需要用到对应的终端命令去调用其他程序,因此温习一下os.system()函数: 参考文献:https://zhuanlan.zhihu.com/p/51716 ...

  3. JZ-066-机器人的运动范围

    机器人的运动范围 题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k ...

  4. 推荐 5 个 yyds 的开源 Python Web 框架

    提到 Python 的 Web 框架,第一反应就是老三样,Django,Flask 和 Tornado.如果按流行度来排名的话,应该也是这个顺序. 在 2016 年,发布了一款 Web 框架,叫 Sa ...

  5. 2022年官网下安装RedisDesktopManager最全版与官网查阅方法

    目录 安装部署RedisDesktopManager 一.下载安装 1.浏览器输入网址:https://github.com/ ,输入搜索条件,找到如图,双击 2.滑动浏览器找到如图位置,双击 3.滑 ...

  6. 1. 企业级调度器LVS初识、工作模式详解

    想学习更多相关知识请看博主的个人博客 1. LVS官网 LVS 时全球最流程的四层负载均衡开源软件. LVS 官网:http://www.linuxvirtualserver.org/ 2.Linux ...

  7. Windows原理深入学习系列-信任等级检查

    这是[信安成长计划]的第 23 篇文章 0x00 目录 0x01 介绍 0x02 逆向分析 Win10_x64_20H2 0x03 WinDBG 0x04 参考文章 在之前的时候,一直以为 SACL ...

  8. ArcGIS进行视域分析及地形图制作

     问题说明 开发商要在本区域建造观景亭,希望在观景亭上能看到优美的景色.根据提供的数据,完成以下要求. 一. 数据说明(见"题目3"文件夹) 1. DEM.tif:研究区域的数据高 ...

  9. java垃圾处理机制

    java文件通过编译器(javac命令)生成class文件(字节码文件),其通过java命令启动虚拟机将字节码文件转换成平台能够理解的方式运行. 类存在于源文件里面,方法存在于类中,语句存在与方法中. ...

  10. ADT环境搭建手册

    前言 笔者在搭建ADT环境之前一脸懵逼,甚至不知道ADT是什么,更别说与之相关的SDK.eclipse等,相信很多小伙伴跟我一样也是一脸茫然,所以在搭建环境之前有必要先了解一下它们是什么,有什么样的关 ...