form表单的onsubmit() return问题

╰半橙微兮° 2022-05-13 22:57 228阅读 0赞

最近写前端小案例，想用到H5自带的表单校验功能，在用到onsubmit时遇到些小问题，在此记录分享一下~

话不多说，先贴表单代码：

然后贴js代码：

代码已贴，最后总结一下用onsubmit事件的注意事项以及可能的坑：

1、html里面要写οnsubmit="return saveForm()"，带return的，这样返回false的话页面才不会跳转。

2、js里面saveForm()方法里要写return false。

3、方法名千万不要叫save()！！！！一定尽量驼峰状长一些的名字，这个可能被js定义过了，所以会出问题（大坑）。

最后说一下另一种写法，就是可以直接在js里面绑定事件，html里面不做操作，话不多说，贴代码：

$('form').submit(function() {
    			var name = $('#name').val();
    			var no = $('#no').val();
    			var zhiwu = $('#zhiwu').val();
    			if(edtIndex == 0){
    				var tr = $('<tr><td>' + name + '</td><td>' + no + '</td><td>' + zhiwu + '</td></tr>');
    				tr.append('<td><input type="button" name="edit" value="编辑" /><input type="button" name="del" value="删除" /></td>');
    				$('table').append(tr);
    			}else{
    				var tr = $('table').find('tr:eq('+edtIndex+')');
    				tr.find('td:eq(0)').text(name);
    				tr.find('td:eq(1)').text(no);
    				tr.find('td:eq(2)').text(zhiwu);
    				edtIndex = 0;
    			}
    			$('#name').val('');
    			$('#no').val('');
    			$('#zhiwu').val('');
    			return false;
    		})

两种方法都可以，不过注意要避开坑=。=