这篇文章主要为大家展示了“javascript如何获取表单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“javascript如何获取表单”这篇文章吧。

我们以前在获取 Form 表单值得时候都是这样的：

<formaction=""method="post"><inputtype="text"name="name"id="name"value="aaa"><inputtype="password"name="password"id="password"><inputtype="submit"name="submit"value="提交"id="submit"></form><script>varname1=document.getElementById('name').value;//获取id为name的值varsubmit1=document.getElementById('submit');//获取submit.准备为其绑定事件submit1.onclick=function(){alert(name1)}//为submit绑定点击事件，将name的值在也页面弹窗显示</script>

上述这种方法获取表单值不仅很麻烦，而且代码量也很大，接下来介绍更快更简介的方法

一、获取 input 中的值

<!--onsubmit事件是在提交表单时触发--><!--return一个函数：是指当函数的返回值位false时，表单不提交，为true时提交--><formaction=""method="post"target="_blank"onsubmit="returnmySubmit(this)"><!--mySumit函数中的参数this是指form调用该函数时会将form传入函数中--><inputtype="text"name="username"><inputtype="submit"name="submit"></form><script>functionmySubmit(form){<!--定义formData对象-->letformData=newFormData(form);<!--利用fromData对象的get方法获取表单数据-->letusername=formData.get('username');<!--进行一些判断或者操作-->if(username.length<5){alert('用户名不得小于5位');returnfalse;}else{returntrue;}returnfalse;}</script>二、获取 type 为 checkbox 类型的 input 值

<formaction=""method="post"onsubmit="returnmySubmit(this)"><inputtype="checkbox"name="hoppy"value="music">音乐<inputtype="checkbox"name="hoppy"value="game">游戏<inputtype="checkbox"name="hoppy"value="movie">电影<inputtype="submit"name=""value="提交"></form><script>functionmySubmit(form){//定义formData对象letformData=newFormData(form);//获取值，因为get只能获取一个值，而这里是多选框，所以这里使用getAll方法lethoppy1=formData.getAll('hoppy');console.log(hoppy1);//页面数据不进行提交，只是进行测试returnfalse;}</script>

以上是“javascript如何获取表单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！