form表单的onsubmit() return问题

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

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

			<form onsubmit="return saveForm()">
				<span>姓名：</span><input type="text" name="name" id="name" value="" required="required" />
				<span>编号：</span><input type="text" name="no" id="no" value="" required/>
				<span>职务：</span><input type="text" name="zhiwu" id="zhiwu" value="" required/>
				<input type="submit" name="save" id="save" value="保存" />
				<input type="button" name="reset" id="reset" value="重置" />
			</form>

然后贴js代码：

		function saveForm() {	
			var name = $('#name').val();
			var no = $('#no').val();
			var zhiwu = $('#zhiwu').val();
			
			/*trIndex != 0 是编辑，否则新增*/
			if(trIndex != 0) {
				var tds = $('table tr').eq(trIndex).find('td');
				tds.eq(0).text(name);
				tds.eq(1).text(no);
				tds.eq(2).text(zhiwu);
				trIndex = 0; //编辑结束，变量重置
			} else {
				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="delete" value="删除" /></td>');
				$('table').append(tr);
			}
			return false;
		};

代码已贴，最后总结一下用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;
		})

 

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