效果:

在点击提交按钮时,首先进行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. 60天shell脚本计划-5/12-渐入佳境

    --作者:飞翔的小胖猪 --创建时间:2021年2月16日 --修改时间:2021年2月20日 说明 每日上传更新一个shell脚本,周期为60天.如有需求的读者可根据自己实际情况选用合适的脚本,也可 ...

  2. linux-日常工作积累

    Linux常用命令之envsubst https://blog.csdn.net/banche163/article/details/101369495 Linux中的EAGAIN含义 https:/ ...

  3. Mysql的用户管理与授权

    Mysql用户管理 本人使用的是Mysql8.0的版本,可能会有一些语句不兼容: 1.用户管理 在Mysql中支持创建账户,并给账户分配权限:例如只拥有数据库A操作的权限.只拥有数据库B中某些表的权限 ...

  4. Markdown语法浅学

    typora语法使用 1.字体 *斜体*,_斜体_ **粗体** ***加粗斜体*** ~~删除线~~ <u>下划线</u> ***分割线 , --- 2.标题 # 一级标题 ...

  5. 03-Eureka注册中心

    1.介绍 2.快速开始 2.1 pom文件依赖 <?xml version="1.0" encoding="UTF-8"?> <project ...

  6. git命令合集

    ##快捷键 ##一. 快捷键 1. 清屏快捷键 control+L 2. vim快捷操作 * control+b 往上翻页 * Control+f 往下翻页 * shift+g 回到末尾 3. oh ...

  7. Hadoop原生对象存储Ozone

    Hadoop 社区推出了新一代分布式Key-value对象存储系统 Ozone,同时提供对象和文件访问的接口,从构架上解决了长久以来困扰HDFS的小文件问题.本文作为Ozone系列文章的第一篇,抛个砖 ...

  8. GoLang设计模式21 - 装饰模式

    装饰器模式是一种结构型设计模式.通过装饰器模式可以为一个对象添加额外的功能而不需对其作出调整. 还是通过具体的案例来了解装饰器模式:假设我们开了一家披萨店,现在店里主营两款披萨: 素食狂披萨(Vegg ...

  9. HarmonyOS小白入门设备开发的“芯”路历程

    HarmonyOS Connect设备开发,相信不少刚入门的开发者都被这些问题所困扰,面对五花八门的开发板不知道该怎么选取?芯片.模组.开发板傻傻分不清?如何使用代码控制开发板? 本期,我们将一一为你 ...

  10. 微信小程序结合laravel完成签到功能

    前端样式未做处理,可将后端数据传至前端进行处理 1.wxml页面 <!--pages/signIn/signIn.wxml--> <view class='signIn'> & ...