onsubmit表单提交简单使用

Posted 2021-07-05 蜜桃婷婷酱

一般表单判断哪些为必填项或者正则时候都会用到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;
  	  	}