效果:

在点击提交按钮时,首先进行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. 怎么安装ExpressionTreeVisualizer for Visual Studio 2019

    1.下载  ExpressionTreeVisualizer   https://github.com/zspitz/ExpressionTreeVisualizer/releases    ,  解 ...

  2. Java：命令行参数的传入和调用

    1.传入 传入时机:执行时 格式: //编译 javac Main.java //执行并传入命令行参数 -version java Main -version 此时,参数-version就以Strin ...

  3. laravel 框架 下拉分页

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 微信小程序授权获取手机号

    wxml: <text>pages/logins/logins.wxml</text> // <button open-type="getPhoneNumber ...

  5. 使用Vscode和Cmake打造跨平台的C++ IDE

    准备工作 Viusal Studio Code 64位 :Download Visual Studio Code - Mac, Linux, Windows Cmake 3.4 :Download | ...

  6. 如何构建一个PKM系统

    原文链接 这篇文章是个人知识总结相关的第一篇文章,主要目的是为了阐述我们为什么需要一个 PKM 系统,并且简单对自己这几年亲身形成的PKM 系统进行总结. PKM 是什么? PKM 是 Persona ...

  7. RENIX板卡V2-100G系列工作模式速率切换——网络测试仪实操

    本文主要介绍了RENIX板卡V2-100G系列工作模式速率切换相关操作.全文分为五部分内容.文章开头对V2-100G系列板卡进行了概述,之后分别详细介绍了100G工作模式.40G工作模式.25G工作模 ...

  8. jmeter关于入参转码encode问题

    我们的工作中,通过抓包经常会发现有很多入参都是被encode过一层,形成了如上图所示的样子: 这些参数我们是可以通过fiddler去转码的:但是如果我们要做jmeter的脚本,不可能每一次都手动去转码 ...

  9. QQ密码防盗5招

    第一招:复制粘贴防木马 每次登录QQ前,新建一个文本文件,并键入密码后复制,关闭文本文件后(不要保存)打开QQ,用"Ctrl+V"把密码粘贴到密码栏里,这样可以防范绝大部分的QQ木 ...

  10. 马哥教育Linux网络班结业考试（架构师）-简答题题目（附答案）

    1.叙述 centos7 启动图形界面的开机启动流程? 答:新版本的CentOS7里,已经做了调整.具体/etc/inittab 文件的第7行已经做出了说明: 系统已经使用'targets' 取代了运 ...