有两个地方可以可以阻止form submit,一是<form οnsubmit="">,而是<form>下的<input type="submit" οnclick="">,只要这两个函数有一个是return false;,那么点击这个button并不会submit form。
具体的执行流程是这样的:
if (submitInput.onclick() == false) {
// 不触发 form.onsubmit();
// form 不提交;
} else {
// 触发 form.onsubmit();
if (form.onsubmit() == false) {
// form 不提交
} else {
// 提交 form
}
}
所以在这个两个函数里面可以加一些验证工作,同时,可以根据验证结果来判断是否提交form。
比如有:
var checkForm = function() { // 获取输入 if (校验失败) return false; else return true; }
然后把这个函数写到onsubmit或是onclick,也可以针对不同的button写不同的逻辑的校验函数,比如这样:
<html>
<form οnsubmit="return checkFormStep2();" method="post" action="/XXX.do">
<input type="text" id="username">
<input type="password" id="password">
<input type="submit" οnclick="return checkFormStep1();" value="go" />
</form>
</html>
在点击时先执行checkFormStep1(),在form提交前再执行checkFormStep2(),两个都通过都return true了才提交
也可以针对“撤销”功能的按钮写一些类似清空输入的功能,再禁止它提交form,比如这样:
<html>
<form method="post" action="/XXX.do">
<input type="text" id="username">
<input type="password" id="password">
<input type="submit" οnclick="return checkFormStep();" value="go" />
<input type="submit" οnclick="clearInput(); return false;" value="reset" />
</form>
</html>