因为才学html,css,js一点点,不是很熟悉。所以当把提交按钮为图片时,遇到了一点小问题。就是提交表单之前需要对表单进行验证。下面是错误的代码:
<form class="form" name="betaform" action="index.jsp" method="post" οnsubmit="return checkData();">
<table align="center">
<tr>
<td class="space"></td>
<td align="left" colspan="2">name:</td>
</tr>
<tr>
<td class="space"></td>
<td align="left"><span class="fieldHolder"><input name="name" class="textInput" type="text" onBlur="checkname(this.value)"></span>
</td>
<td>
<span id="nameErr"></span>
</td>
</tr>
<tr>
<td class="space"></td>
<td align="left" colspan="2"> password:</td>
</tr>
<tr>
<td class="space"></td>
<td align="left"><span class="fieldHolder"><input name="password" class="textInput" type="password" onBlur="checkpsw(this.value)"></span>
</td>
<td>
<span id="pswErr"></span>
</td>
</tr>
</table>
<br /><br /><br />
<div align="center">
<img src="images/login-submit.png" onClick="document.betaform.submit();" class="loginSubmit">
</div>
</form>
一下是js的代码:
function checkData() {
var name=document.betaform.name.value;
if(!checkname(name)) {
return false;
}
var psw=document.betaform.password.value;
if(!checkpsw(psw)) {
return false;
}
return true;
}
function checkname(name) {
if(name.length == 0) {
document.getElementById("nameErr").innerHTML = "用户名不能为空";
return false;
} else {
document.getElementById("nameErr").innerHTML = "";
return true;
}
}
function checkpsw(psw) {
if(psw.length == 0) {
document.getElementById("pswErr").innerHTML = "密码不能为空";
return false;
} else {
document.getElementById("pswErr").innerHTML = "";
return true;
}
}
按照上面的写法,只要一按提交图片,不管表单填的数据是否正确都能跳转。认真的思考了一下,觉得应该是
<form class="form" name="betaform" action="index.jsp" method="post" οnsubmit="return checkData();">
<img src="images/login-submit.png" onClick="document.betaform.submit();" class="loginSubmit">
这两句的问题,因为点击图片直接进行提交,所以在<form>里设置的 onsubmit没有用,于是将这两句改成下面的样子。
<form class="form" name="betaform" action="index.jsp" method="post">
<img src="images/login-submit.png" onClick="checkData();" class="loginSubmit">
js相应的也进行了修改:
function checkData() {
var name=document.betaform.name.value;
if(!checkname(name)) {
return false;
}
var psw=document.betaform.password.value;
if(!checkpsw(psw)) {
return false;
}
document.betaform.submit(); //如果通过验证,则提交表单
}
以此实现点击图片时先进行表单验证,如果通过,则提交表单。