form 表单提交数据小记

简介: form表单传统的提交方式,会跳转页面,需要做处理才行,可以在form上配置提交方式、提交地址,可以用submit、和button提交<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.
  • 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会得到所选取文件的数组,可以进行相应的操作

相关文章
|
5月前
|
JSON JavaScript 前端开发
form表单提交方式
form表单提交方式
|
9月前
|
Java
SpringMVC中使用form:form表单标签报500错误
SpringMVC中使用form:form表单标签报500错误
73 0
|
移动开发 Java HTML5
HTML5 学习11.初识表单post和get提交
HTML5 学习11.初识表单post和get提交
|
前端开发 安全 JavaScript
form表单提交的submit和ajax区别
有关同源策略和跨域,可以参考 跨域的那些事儿
433 0
form表单只提交数据而不进行页面跳转的原因
form表单只提交数据而不进行页面跳转的原因
255 0
form表单只提交数据而不进行页面跳转的原因
|
JSON 前端开发 数据格式
如何优雅的获取Form表单数据?
如何优雅的获取Form表单数据?
如何优雅的获取Form表单数据?
|
JavaScript
Extjs Form 表单修改
Extjs修改分两种方法:1.前台直接加载;2.通过后台远程加载 1.直接加载:方法 form.getForm().loadRecord(); 应用时要求页面上已经存在页面中的所有数据,比如选中gridPanel一行,然后直接传递此行记录,到formPanel页面,可直接加载 2.后台加载:方法 form.getForm().load(); 应用时 传递一个参数到后台,然后远程取值,绑定。
977 0
|
前端开发
LayUI表单提交数据为空
本文目录 1. 现象 2. 解决方案
447 0