一段js代码教会你实现form表单重复提交验证

如下代码所示，定一个变量isSubmit默认为false，在saveStoreOrder方法中开始就进行判断isSubmit的是否为true，当表单验证通过时，第一时间将isSubmit改成true，然后当与后台交互完毕后再将isSubmit改回默认的false。

js获取form表单数据方法

wpmee小编为大家分享一个js获取form表单数据方法。

方法如下：

1、有的时候想偷点懒，页面上有大量的表单提交数据，每次单独获取都比较麻烦。代码冗余度也比较多，因此封装了一个方法。

2、表单元素必须要有name属性，name属性是向后端提交的字段数据。

3、html代码

<h3>下拉框</h3>
<select name=\"sel\" id=\"sel\" class=\"query\">
<option value =\"sel-1\">sel-1</option>
<option value =\"sel-2\">sel-2</option>
</select>
<h3>输入框</h3>
<input type=\"text\" name=\"text1\" class=\"query\" value=\"hello\" />
<input type=\"text\" name=\"text2\" class=\"query\" value=\"word\" />
<h3>密码框</h3>
<input type=\"password\" name=\"password\" class=\"query\" value=\"123456\" />
<h3>单选框</h3>
单选1<input type=\"radio\" name=\"radio\" class=\"query\" value=\"r1\" checked />
单选2<input type=\"radio\" name=\"radio\" class=\"query\" value=\"r2\" checked/>
单选3<input type=\"radio\" name=\"radio\" class=\"query\" value=\"r3\" />
<h3>复选框</h3>
复选框1<input type=\"checkbox\" name=\"check\" id=\"\" class=\"query\" value=\"c1\" checked/>
复选框2<input type=\"checkbox\" name=\"check\" id=\"\" class=\"query\" value=\"c2\" />
复选框3<input type=\"checkbox\" name=\"check\" id=\"\" class=\"query\" value=\"c3\" checked/>
<h3>search</h3>
<input type=\"range\" name=\"range\" id=\"\" class=\"query\" value=\"\" />
<input type=\"color\" name=\"color\" id=\"\" class=\"query\" value=\"\" />
<h3>
<button type=\"button\" id=\"save\">
提交
</button>
</h3>

4、此处引入了JQ库。

4.1、js代码块

使用说明：调用方法的时候传入class名称即可。

// 封装方法，获取到form表单的数据。使用此方法，表单元素必须存在那么属性。
//el:元素的class名称。
function getParameter(el){
var obj={};
$(el).each(function(index,item){
// 判断元素的类型
if(item.type==\"text\" || item.type==\"password\" || item.type==\"select-one\" || item.type==\"tel\" || 
item.type==\"search\" || item.type==\"range\" || item.type==\"number\" || item.type==\"month\" || 
item.type==\"email\" || item.type==\"datetime-local\" || item.type==\"datetime\" || item.type==\"date\" || 
item.type==\"color\"){
//获取到name的值,name的值就是向后台传递的数据
obj[$(this).attr(\"name\")]=$(this).val();
}else if(item.type==\"checkbox\"){
var stamp=false;
if($(this).attr(\"name\") && !stamp){
stamp=false;
// 获取到复选框选中的元素
var checkboxEl=$(\"input[name=\"+$(item).attr(\'name\')+\"]:checked\");
if(checkboxEl){
var checkboxArr=[];
// 取出复选框选中的值
checkboxEl.each(function(idx,itm){
checkboxArr.push($(itm).val());
});
obj[$(this).attr(\"name\")]=checkboxArr.join(\",\");
}
}
}else if(item.type==\"radio\"){
// 获取到单选框选中的值
var radio_val=$(\"input[name=\"+$(item).attr(\'name\')+\"]:checked\").val();
if(radio_val){
obj[$(item).attr(\"name\")]=radio_val;
}
}
});
return obj;
}
// 调用方法
$(\"#save\").click(function(){
　　 var　parameter=getParameter(\".query\");
　　　　 　　console.log(parameter); 
　　　　　});

以上就是个js获取form表单数据方法的详细内容。