效果:

在点击提交按钮时,首先进行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. windows消息机制框架原理【简单版本】

    windows消息机制框架原理 结合两张图理解 窗口和窗口类 Windows UI 应用程序 (e) 具有一个主线程 (g).一个或多个窗口 (a) 和一个或多个子线程 (k) [工作线程或 UI 线 ...

  2. VIM对替换的数字进行计算

    VIM对替换的数字进行计算 运行下面的命令 %s/sub(\([0-9]*\))/\=submatch(1)+8/g 函数式 :s/替换字符串/\=函数式

  3. linux设置 自定义脚本开机启动

    本文原创,转载请标明出处 https://blog.csdn.net/qq2531246791/article/details/89036084 一. 赋予可执行权限 chmod +x /etc/rc ...

  4. Python 爬取 "王者荣耀.英雄壁纸" 过程中的矛和盾

    1. 前言 学习爬虫,最好的方式就是自己编写爬虫程序. 爬取目标网站上的数据,理论上讲是简单的,无非就是分析页面中的资源链接.然后下载.最后保存. 但是在实施过程却会遇到一些阻碍. 很多网站为了阻止爬 ...

  5. vue项目npm run dev报错events.js:160 throw er; // Unhandled 'error' event listen EADDRINUSE :::8002

    出错情况,如下图: 报错原因: listen EADDRINUSE :::8002 意思是当前8002端口被占用 解决办法: 一:简单粗暴:关掉可能影响的相关程序,重新执行启动. 二: 1.Win+R ...

  6. anaconda及jupyter notebook的了解及使用方法(1)

    今日内容 anaconda软件使用 jupyter notebook基本使用及快捷键 numpy anaconda软件使用 1.进入anaconda主页点击jupyter启动即可 呼起一个jupyte ...

  7. Docker - 安装&测试

    一.什么是Docker Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中 ...

  8. Pytorch中pad函数toch.nn.functional.pad()的用法

    padding操作是给图像外围加像素点. 为了实际说明操作过程,这里我们使用一张实际的图片来做一下处理. 这张图片是大小是(256,256),使用pad来给它加上一个黑色的边框.具体代码如下: 1 2 ...

  9. LGP3703题解

    不会数据结构石锤了/kk 题意清晰. 我们看到 \(1\) 操作比较奇怪,考虑从 \(1\) 操作入手. 设 \(f_u\) 为 \(u\) 到根节点一共有多少种颜色,我们使用树剖来维护这个东西. 考 ...

  10. LGP4451题解

    题意明确,不再阐述( 首先,众所周知的是 斐波那契数列 的生成函数是 \(F(x)=\frac x {1-x-x^2}\) 那么答案就是 \(\sum_{i=0} F^i(x) = \frac 1 { ...