在写表单处理的时候,经常会用到onSubmit事件,而onSubmit事件经常用到return关键字,比如:
<!DOCTYPE html>
<html>
<head>
<title>onsubmit用户提交,submit属性,事件</title>
</head>
<script type="text/javascript">
function test(){
var s1 =document.mianform.user.value;
var s2 = document.mianform.pwd.value ;
if(s1 == ""||s2 ==""){
alert('请将内容填写完整');
return false ;//false不提交
}
return true ; // true提交
}
</script>
<body>
<form name="mianform" onsubmit="return test()">
<label>姓名:</label>
<input type="text" name="user" onfocus="console.log('点击这里输入用户名');" onblur="console.log('文本失去焦点');">
<br>
<label>密码:</label>
<input type="password" name="pwd" >
<br>
<input type="submit" value="提交" >
</form>
</body>
</html>
这样处理的作用是当点击submit时,调用test函数,通过test函数对表单进行初步的判断处理,然后返回true或者false。当返回true时,onSubmit事件就为
onSubmit=“return true”
这时进行下一步。
若receive处理之后返回false,则onSubmit事件就为
onSubmit="return false"
这时返回一个false,系统将不会继续运行。
这里return的作用就是对test函数运行返回的结果,再向上返回,以便能在发现错误时即使停止后面继续将错误的数据拿去运行。
如果不加return的话,那么onSubmit在逻辑上就可以看成
onSubmit="false"
或者
onSubmit="true"
这样也只能算是把false或者true字符串赋值给onSubmit。并不具有一定的功能,即不论表单中是否出现错误,都会继续运行下去。当然,表单中的错误处理也可以通过服务器端进行处理,但是能在前端处理的,就尽量在前端处理,不然会加大服务器的压力。
很多表单处理函数,比如上面说的test函数,里面也许不会有return true的语句(但是绝对有return false的语句),因为当一个函数顺利运行完成之后,系统将默认的返回一个true,所以true是可选的,但是false却是必须的。
下面来看一下test函数的大致写法:
function test()
{
var formLength = document.forms['form1'].elements.length;
for(var i = 0; i < formLength - 1; i++)
{
if(document.forms['form1'].elements[i].value.length == 0)
{
alert("第" + (i + 1) + "个文本没有输入");
return false;
}
}
}