onsubmit表单提交简单使用

一般表单判断哪些为必填项或者正则时候都会用到onsubmit函数,主要是通过返回的true或者false而进行执行,这里简单说下判断表单属性非空提交

onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。

在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。

但是onclick比onsubmit更早的被触发。

提交过程

1、用户点击按钮 —->

2、触发onclick事件 —->

3、onclick返回true或未处理onclick —->

4、触发onsubmit事件 —->

5、onsubmit未处理或返回true ——>

6、提交表单.

  <form action="/SubjPsbg.do?method=uploadSubj" enctype="multipart/form-data" method="post" onsubmit="return fileSubmit()">
         <b style="font-size:18">请选择文件：<b/>
         <input type="file" name="file" id="file"/>
    	 <input type="submit" value="提交" class="layui-btn">
    </form>

千万不要忘了加上return,这个很重要 不然会失效

第一种

 onsubmit="return fileSubmit()"

function fileSubmit(){
			var f=document.getElementById("file").value;
			if(f==""){
				alert("请选择文件");
				return false;
				
			}else{
				alert("上传成功！");
				
			}
			return true;
  	  	}

第二种(就是定义中间布尔变量,通过变量判断执行)

 onsubmit="return fileSubmit()"

function fileSubmit(){
  	  		var flag;
			var f=document.getElementById("file").value;
			if(f==""){
				alert("请选择文件");
				flag=false;
			}else{
				alert("上传成功！");
				
			}
			return flag;
  	  	}

另外一种非onsbumit的提交,正常的按钮提交
form 加上 id=“form”

  	 <form action="/SubjPsbg.do?method=uploadSubjPsbg" enctype="multipart/form-data" method="post"  id="form">

按钮

    	 <input type="button" value="提交" class="layui-btn" onclick="test();">

js

function test(){
  			var f=document.getElementById("file").value;
  			if(f==""){
  				layer.msg("请选择文件!",{icon:5,anim:6});
				return false;
  			}
  			else{
  				layer.msg("上传成功!",{icon:6,anim:2});
  	  		}
  			document.getElementById("form").submit();
  			

  	   }