经常要对form表单内容进行js验证,在点击submit按钮之后,在提交action之前。以前用button按钮,button有个缺点:不能靠回车键触发。这里写出两个方法,均是submit按钮提交。
[size=large][color=green]方法一:onsubmit事件。[/color][/size]
表单代码如下:
<form id="myform" antion="hello.jsp" method="post"
[color=red]οnsubmit="return checkForm()" [/color]>
name:<input type="text" id="name" />
<input type="submit" value="login" />
</form>
js代码如下:
function checkForm(){
var name = document.getElementById("name").value;
if(name == "no"){
alert("表单不能提交!");
[color=red]return false;[/color]
}
[color=red]return ture;[/color]
}
[size=large][color=green]方法二:onClick事件。[/color][/size]
表单代码如下:
<form id="myform" method="post" [color=red]antion="" name="form1"[/color]>
name:<input type="text" id="name" name="name1"/>
<input type="submit" value="login" οnclick="checkForm();[color=red]return false[/color]"/>
</form>
js代码如下:
function checkForm(){
var name = document.getElementById("name").value;
if(name == "no"){
alert("表单不能提交!");
form1.name1.focus();
[color=red] return;[/color]
}
[color=red]form1.action="hello.jsp";
form1.submit();[/color]
}
总结:注意红色部分的不同之处,方法一是return一个true或者false来决定表单提交;方法二是永远return一个false,在js方法里重填action再提交。
[size=large][color=green]方法一:onsubmit事件。[/color][/size]
表单代码如下:
<form id="myform" antion="hello.jsp" method="post"
[color=red]οnsubmit="return checkForm()" [/color]>
name:<input type="text" id="name" />
<input type="submit" value="login" />
</form>
js代码如下:
function checkForm(){
var name = document.getElementById("name").value;
if(name == "no"){
alert("表单不能提交!");
[color=red]return false;[/color]
}
[color=red]return ture;[/color]
}
[size=large][color=green]方法二:onClick事件。[/color][/size]
表单代码如下:
<form id="myform" method="post" [color=red]antion="" name="form1"[/color]>
name:<input type="text" id="name" name="name1"/>
<input type="submit" value="login" οnclick="checkForm();[color=red]return false[/color]"/>
</form>
js代码如下:
function checkForm(){
var name = document.getElementById("name").value;
if(name == "no"){
alert("表单不能提交!");
form1.name1.focus();
[color=red] return;[/color]
}
[color=red]form1.action="hello.jsp";
form1.submit();[/color]
}
总结:注意红色部分的不同之处,方法一是return一个true或者false来决定表单提交;方法二是永远return一个false,在js方法里重填action再提交。