关于form与表单操作

form表单自动提交规则

form表单中只有一个type=text的input，在input中按enter键，会自动提交；
form表单中有多个type=text的input，且无type=submit的按钮元素，则在input中按enter键，不会自动提交
form表单中有type=submit的按钮元素，点击按钮元素或者在input中按enter键，会自动提交
form表单中有type=button的按钮元素且有多个input元素，点击按钮元素或者在input中按enter键，不会自动提交

form表单提交方法总结

方法一：浏览器默认提交表单的方法

<form action="/login" method="post" onsubmit="return toValid();">

  <input type="text" name="phone" placeholder="请输入手机号" />

  <input type="password" name="password" placeholder="输入密码" />

  <button type="submit">登录</button>

</form>

通过点击type="submit"的提交按钮来触发form表单的onsubmit事件。form表单自动提交规则1，3也是通过触发onsubmit事件来进行表单提交的。因此，若要阻止表单提交，可以通过return false;，当return true;时则会提交表单；通常我们会在html代码中返回一个函数，函数通过验证表单数据的完整性来决定返回true或者false。这里的提交按钮既可以是button标签也可以是input标签，只要type="submit"就可以。

需要注意的是，<input type="submit" value="提交" name="btn" />和<button type="submit" name="btn" value="提交">提交</button>这两种方式会导致浏览器将value作为name对应的值提交给服务器。因此最好不要这样使用。另外，button和input的相似之处不止于此，button也可以设置type=reset，此时点击按钮会导致表单被重置。

方法二：submit()方法

该方法是用js来实现对表单的提交，但是表单的 onsubmit 事件句柄不会被调用，该方法一般用于通过点击某个普通按钮来进行表单提交。例如：

document.getElementById('form-id').submit();

document.myForm.submit();//通过表单的name属性值来获取表单元素

document.forms['formName'].submit();//通过返回当前文档中<form>元素的集合来获取表单元素

这两种方法都需要指定action属性和method方法(默认是get)，才能把数据以正确的方法发送到指定的服务器地址，否则将会出现404页面。

方法三：ajax方式进行异步提交

前两种方式会使得页面跳转，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或者数据变化。这个时候就需要用到ajax异步提交并获取数据了，目前现在很多网站也是采用这种方法。通过XMLHttpRequest生成的请求可以有两种方式来获取数据，异步模式或同步模式。请求的类型是由这个XMLHttpRequest对象的open()方法的第三个参数async的值决定的。如果该参数的值为false，则该XMLHttpRequest请求以同步模式进行，否则该过程将以异步模式完成。

例如：

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

  if(xhr.readyState == 4) {

    if(xhr.status == 200) {

      let resText = JSON.parse(xhr.responseText);

      if(resText.code == 1) {

        //其他操作

      }

    }

  }

}

xhr.open('POST','/api/code',true);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//在这里来设置

xhr.send(`phone=${phoneNumber.value}`);

区别：表单提交时，页面是整体刷新，且由后端来控制页面跳转；而ajax方式提交时，页面是局部刷新，可由js来控制页面跳转。

文件上传的三种方法

方法一：利用表单实现文件上传

注意：1：post方式提交， 2：enctype="multipart/form-data"

方法二：使用ajax和FormData对象异步上传文件

例如：代码来自MDN

var form = document.forms.namedItem("fileinfo");

form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),

      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();

  oReq.open("POST", "stash.php", true);

  oReq.onload = function() {

    if (oReq.status == 200) {

      oOutput.innerHTML = "Uploaded!";

    } else {

      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";

    }

  };

  oReq.send(oData);

  ev.preventDefault();

}, false);

方法三：iframe上传

未使用过这种方法，google搜索怎么实现。

js阻止form表单自动提交方法

方法一：return false;

方法二：event.preventDefault();这种方法一般是用在监听form表单的submit事件或者监听提交按钮的点击事件从而获取到事件对象event。