<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<style>
#myloc,#mypass{
color: red;
}
</style>
<script>
function validateform(){
var username=document.login.username.value;
var password=document.login.password.value;
if (username==null || username==""){
var data="username should not be blank.";
document.getElementById("myloc").innerHTML=data;
return false;
}else if(password.length<6){
var p="Password must be at least 6 characters long.";
document.getElementById("mypass").innerHTML=p;
return false;
}
}
</script>
<body>
<form action="/loginusingservlet/LoginSES" onsubmit="return validateform()" method="post" name="login">
<table>
<tr>
<td>username</td><td> <input type="text" name="username"></td></tr>
<tr><td></td><td><div id="myloc"></div></td>
</tr><tr><td>password</td><td> <input type="text" name="password"></td></tr>
<tr><td></td><td><div id="mypass"></div></td></tr>
<tr><td></td><td><input type="submit" value="submit"></td></tr>
</table>
</form>
</body>
</html>
该程序效果很好...当我单击提交按钮时,它会显示诸如“用户名不应为空”或“密码至少6”之类的消息。收到消息后..如果我单击文本框,我希望消息消失,直到我单击“提交”按钮。
最佳答案
干得好。脚本中的新功能(它检查参数并从特定元素中删除文本:
function removeWarning(type)
{
(type == 1) ? document.getElementById('myloc').innerHTML = "" : document.getElementById('mypass').innerHTML = "";
}
并在输入中添加
onClick
事件。<input type="text" name="username" onClick="removeWarning(1)">
<input type="text" name="password" onClick="removeWarning(2)">
对我来说,它正在工作,但这是一个快速的解决方案,有可能有所改善。