- form表单传统的提交方式,会跳转页面,需要做处理才行,可以在form上配置提交方式、提交地址,可以用submit、和button提交
<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return checkUser();" > 其中checkUser返回false为不提交,你可以在checkUser中做数据校验
用button提交时
function checkUser(){ var result = document.getElementById("userid").value; var password = document.getElementById("passid").value; if(result == "" ){ alert("用户名不能为空"); return false; } if(password == "" ){ alert("密码不能为空"); return false; } document.getElementById("formid").submit(); // 获取form的ID,然后调用它的submit方法 }
- 还有一种方法就是用let data = new FormData() 方法,FormData方法里传入页面form元素,然后用axios post方法将data传入即可,注意:form里input必须有name字段(即需要上传的字段),如果需要额外的字段且不需要input的情况,有两种解决办法:1、可以在页面中放入input 设属性hidden:true,2、用data.appen(‘字段名’, 内容),添加到form对象里
<form id="forms"> <input name="name"/> <input name="age"/> </form> <script> let form = document.getElementById('forms') let data = new FormData(form) data.append('age', 12) </script>
- input file accept属性
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" ref="inputFile" :name="name" id="picture" @change="changePicture">
<input type="file" name="file" id="contactAttachments" class="attachment-file" accept="application/pdf">
- form表单上传多文件 添加multiple属性,打开本地文件选择的时候就可以选择多文件,
let a = e.target.files || e.dataTransfer.files
通过a会得到所选取文件的数组,可以进行相应的操作
时间: 2024-10-06 04:16:41