JS代码:
<script language="javascript">
function on_submit() {//验证数据的合法性if (form1.userName.value == "") {
document.getElementById("userNameDiv1").style.display = "block";
form1.userName.focus();
return false;
}else
if (form1.pwd.value == "") {
document.getElementById("passwordDiv").style.display = "block";
form1.pwd.focus();
return false;
}else
if (form1.repwd.value != form1.pwd.value) {
document.getElementById("repwdDiv").style.display = "block";
form1.repwd.focus();
return false;
}else
if (form1.email.value != ""&&
form1.email.value.search(/^\w+((-\w+)|(\.\w+))*\@{1}\w+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig) == -1) {
document.getElementById("emailDiv").style.display = "block";
form1.email.focus();
return false;
}else
if (form1.phoneNumber.value.search(/^(?:11\d|15[89])-?\d{5}(\d{3}|\*{3})$/) == -1) {
document.getElementById("phoneNumberDiv").style.display = "block";
form1.phoneNumber.focus();
return false;
}else
if (form1.address.value == "") {
document.getElementById("addressDiv").style.display = "block";
form1.address.focus();
return false;
}else{
return true;}
}
</script>
html代码:
<form action="RegistServlet" method="post" name="form1" onSubmit=" return on_submit()">
<h1>
注册界面
</h1>
<br>
<table>
<tr>
<td align="right">
*
</td>
<td>
用户名:
</td>
<td>
<input type="text" name="userName" >
</td>
<td>
<div id="userNameDiv1" style="display: none" class="STYLE1">
用户名不能为空
</div>
<div id="userNameDiv2" style="display: none" class="STYLE1">
用户名重复
</div>
</td>
</tr>
<tr>
<td align="right">
*
</td>
<td>
密码:
</td>
<td>
<input type="password" name="pwd" >
</td>
<td>
<div id="passwordDiv" style="display: none" class="STYLE1">
密码不能为空
</div>
</td>
</tr>
<tr>
<td align="right">
*
</td>
<td>
重复密码:
</td>
<td>
<input type="password" name="repwd">
</td>
<td>
<div id="repwdDiv" style="display: none" class="STYLE1">
两次输入的密码不同
</div>
</td>
</tr>
<tr>
<td></td>
<td>
邮箱:
</td>
<td>
<input type="text" name="email" >
</td>
<td>
<div id="emailDiv" style="display: none" class="STYLE1">
邮箱输入格式不正确
</div>
</td>
</tr>
<tr>
<td align="right">
*
</td>
<td>
电话:
</td>
<td>
<input type="text" name="phoneNumber" >
</td>
<td>
<div id="phoneNumberDiv" style="display: none" class="STYLE1">
电话号码必须为11位手机号
</div>
</td>
</tr>
<tr>
<td align="right">
*
</td>
<td>
地址:
</td>
<td>
<input type="text" name="address" >
</td>
<td>
<div id="addressDiv" style="display: none" class="STYLE1">
地址不能为空
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center">
(带*的为必填项)
</td>
</tr>
<tr>
<td></td>
<td align="center">
<input type="submit" value="注册" >
</td>
<td align="center" colspan="2">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
问题一:编译工具报错? οnsubmit="return check()"时,会报Cannot return from outside a function or method.这时取消编译工具的自动验证功能即可
问题二:验证不起作用? onsubmint只对input的submit类型起作用,如果写的是input ,type="button",然后通过一个js方法来提交action,验证会不起作用。
举例:<a style="float:left;" class="save" οnclick="save()"><span>保存</span></a>
function save(){
document.forms[0].submit();
}
这样写,验证代码是不会起作用的
直接在form里的table里写input的submit类型的提交,即可,如<input type="submit" class="save" value="保存"/>