有一个表单可以处理三个事件:新建、修改和删除,要求在处理删除事件时给出确认提示,其他操作只要输入合法,提交后就可进行。
FormValid(form)对输入数据统一进行合法性验证。
2、实施
为了区分提交的事件,在三个按钮的onclick()中为隐藏域赋值作为标记。
<input type="hidden" name="hidden_submit" id="hidden_submit" value="none" />
然后将三个按钮类型设置为button,验证通过后由submit()函数提交即可。
<input type="button" value="新建" οnclick="fun_new(this)"/>
<input type="button" value="修改" οnclick="fun_update(this)" />
<input type="button" value="删除" οnclick="fun_delete(this)"/>
function fun_delete(){
document.form.hidden_submit.value = "DELETE";
if(FormValid(document.form)){
if(confirm("确认删除?")){
document.form.submit();
}
}
}
3、讨论
既然FormValid()函数是全表单的验证,那能否在表单的onsubmit()中进行?
<form id="form" name="form" method="post" action="#" οnsubmit="return FormValid(this)"></form>
onsubmit()函数在返回值为true时提交表单。
这时,三个按钮的类型应为submit()。
这样,按钮中只需给隐藏域赋值,验证交予表单处理。然而问题是如何给出删除确认?
倘若在删除按钮的onclick()函数中进行,则有可能用户点击确认删除,而结果却是不满则提交条件。这是因为按照逻辑,应是数据合法性验证通过后才能给出删除操作的确认提示,而事实上onclick()函数的执行顺序先于onsubmit()。
所以只能在onsubmit()中给出删除提示,根据之前的思路很容易写出:
<form id="form" name="form" method="post" action="#" οnsubmit="fun_submit(this)"></form>
function fun_submit(form){
var flag = false;
if(FormValid(form)){
flag = true;
if( form.hidden_submit.value=="DELETE"){
if(!confirm("确认删除?")) flag = false;
}
}
return flag;
}
或者直接用三元表达式写在form中:
<form id="form" name="form" method="post" action="#"
οnsubmit="return FormValid(this)?this.hidden_submit.value == 'DELETE'? confirm('确定删除该用户账号?'):true::false">
4、总结
问题很简单,主要两个要点:
1、onclick()和onsubmit()的执行顺序。参考onSubmit和onclick区别
onsubmit是表单上(也只能是表单)用的,提交表单前会触发
onclick是按钮等控件上用的,用来触发点击事件.
用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可以在onsubmit中验证.但是从事件触发顺序上来说,onclick更早.顺序是:
用户点击按钮->onclick->如果onclick返回有效或未处理onclick则提交表单->onsubmit->如果onsubmit未处理或返回true,则提交,否则取消提交.
onsubmit中返回false会引起取消表单提交;
onclick中返回false则会引起此次点击操作被判断为无效,则也就不会引起表单提交.
2、三目运算符可以简化代码,但有时不利于阅读。