javaEE (三）javaweb_JavaScript (3) 改进表单校验
Date：2018/11/13
改进表单校验弹出式为旁显式，效果如下：
源代码：
<!-- 1:用onfocus聚焦事件，用onblur脱离事件，此处是指用户点击输入框； -->
<!-- 2:用<span>在框的后面添加我们要显示的字段； -->
<!-- 3:在函数里加参数，函数泛化； -->
<!-- 4:函数参数，外双内单或者外单内双； -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table+form</title>
<!-- 弹出式表单校验
<script>
function checkForm(){
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
var repassword = document.getElementById("repassword").value;
var getemail = document.getElementById("email").value;
var testemail = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if(name == ""){
alert("名字输入不能为空!");
return false;
}else{
alert("hello " + name + "先生!");
}
if(password == ""){
alert("密码输入不能为空!");
return false;
}
if(password != repassword){
alert("确认密码和输入密码不一致!");
return false;
}
if(!testemail.test(getemail)){
alert("邮箱格式不对!");
return false;
}
}
</script> -->
<script>
function focusfunc(id,info){
document.getElementById(id + "span").innerHTML = "<font color='grey'>" + info + "</font>";
}
function blurfunc(id,info){
var aaa = document.getElementById(id).value;
if(aaa == ""){
document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";
}else{
document.getElementById(id + "span").innerHTML = "";
}
}
</script>
</head>
<body>
<table border="1px" width="1300px" cellpadding="0px" cellspacing="opx" align="center">
<!-- 第一行广告 -->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第二行超链接 -->
<tr bgcolor="black">
<td colspan="7">
<a href="#" ><font size="5" color="red">首页</font></a>
<a href="#"><font color="red">手机数码</font></a>
<a href="#">电脑办公</a> <a href="#">鞋靴箱包</a>
<a href="#">家用电器</a></td>
</tr>
<!-- 嵌套一个十行二列的注册表单 -->
<tr >
<td height="600px" background="../img/111.jpg" >
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="400px" cellpadding="0px" cellspacing="0px" align="center">
<tr>
<td colspan="2">
<font size="4">会员注册 USER REGISTER</font>
</td>
</tr>
<tr>
<td>
<font>用户名 </font>
</td>
<td>
<input type="text" name="用户名" placeholder="请输入用户名" id="name"
onfocus="focusfunc('name','请填写您的名字!')" onblur="blurfunc('name','用户名不能为空!')"/> <span id="namespan"></span>
</td>
</tr>
<tr>
<td>
<font>密码</font>
</td>
<td>
<input type="text" name="password" placeholder="请输入密码" id="password"/>
</td>
</tr>
<tr>
<td>
<font>确认密码</font>
</td>
<td>
<input type="password" name="newpassword" placeholder="请确认密码" id="repassword"/>
</td>
</tr>
<tr>
<td>
<font>Emaile</font>
</td>
<td>
<input type="text" name="email" placeholder="请输入email" id="email"/>
</td>
</tr>
<tr>
<td>
<font>姓名</font>
</td>
<td>
<input type="text" name="name" placeholder="请输入姓名"/>
</td>
</tr>
<tr>
<td>
<font>性别</font>
</td>
<td>
<input type="radio" name="man" value="man"/>man
<input type="radio" name="woman" value="woman"/>man
</td>
</tr>
<tr>
<td>
<font>出生日期</font>
</td>
<td>
<input type="text" name="出生日期" placeholder="请输入出生日期"/>
</td>
</tr>
<tr>
<td>
<font>验证码</font>
</td>
<td>
<input type="text" name="验证码" placeholder="请输入验证码"/>
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td>
<font>注册</font>
</td>
<td>
<input type="submit" name="提交按钮" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!-- 第四行广告 -->
<tr>
<td colspan="7"><img src="../img/footer.jpg" width="100%"/></td>
</tr>
<!-- 超链接 -->
<tr>
<td colspan="7" align="center">
<a href="#" >关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#" >配送方式</a> <a href="#" >服务声明</a> <a href="#" >广告声明</a>
<p> 南京邮电大学PizAn 版权所有</p>
</td>
</tr>
</table>
</body>
</html>