运行效果图:
HTML代码:
<script>
function checkForm(){
//校验用户名
//获得用户名文本框的值
var username=document.getElementById("username").value;
if(username==null || username==''){
alert("用户名不能为空");
return false;
} //校验密码
//获得密码的值
var password=document.getElementById("password").value;
if(password==null || password==''){
alert("密码不能为空");
return false;
} //校验确认密码
var repassword=document.getElementById("repassword").value;
if(repassword != password){
alert("密码输入不一致");
return false;
}
} </script>
JSP代码:
<form id="registerForm" method="post" novalidate="novalidate" onsubmit="return checkForm();">
<table>
<tbody><tr>
<th>
<span class="requiredField">*</span>用户名:
</th>
<td>
<input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername();"/>
<span id="span1"></span>
</td>
</tr>
<tr>
<th>
<span class="requiredField">*</span>密 码:
</th>
<td>
<input type="password" id="password" name="password" class="text" maxlength="20" autocomplete="off">
</td>
</tr>
<tr>
<th>
<span class="requiredField">*</span>确认密码:
</th>
<td>
<input id="repassword" type="password" name="repassword" class="text" maxlength="20" autocomplete="off">
</td>
</tr>
</tbody>
</table>
</form>