创建一个用户注册的页面,让用户输入姓名、密码、电话和邮箱,使用javascript脚本完成密码校验、电话号码校验、邮箱校验和空格内容校验。
开发步骤如下。
(1)创建一个项目名为CheckInfomation,在WebContent文件夹下创建一个index.jsp文件,代码如下:
<%@page language="java.util.*"pageEncoding="UTF-8"%>
<html>
<head>
<title>检测单元表是否为空</title>
<script language="javascript">
function checkNull(form){
/*判断是否为空*/
for(i=0;i<form.length){
if(form.elements[i].value==""){
alert("很抱歉,"+form.elements[i].title+"不能为空!");
form.elements[i].focus();
return false;
}
}
/*判断两次密码是否一致*/
var pwd1=document.getElementById("pwd1_id").value;
var pwd2=document.getElementById("pwd2_id").value;
if(pwd1!=pwd2){
alert("两次密码不一致,请重新输入!");
return false;
}
/*判断电话号码是否有效*/
var phone=document.getElementById("phone_id").value;
var regExpression=/^(86)?((13\d{9})|(15[0,1,2,3,5,6,7,8,9]\d{8})|(18[0,5,6,7,8,9]\d{8}))$/;
var objExp = new RegExp(regExpression);//创建正则表达式对象
if(objExp.test(phone)==false){
alert("您输入的手机号码有误!");
return false;
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="" οnsubmit="return checkNull(form1)">
<table width="296" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#333333">
<tr>
<td colspan="2" bgcolor="#eeeee">·用户注册</td>
</tr>
<tr>
<td width="200" align ="center" bgcolor="#FFFFFF">用户名:</td>
<td width="384" bgcolor="#FFFFFF"><input name="user" type="text" id = "user_id" title="用户名">
*</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">密 ; ;码:</td>
<td bgcolor="#FFFFFF"><input name="pwd" type="password" id = "pwd1_id" title="密码">
*</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">确认密码:</td>
<td bgcolor="#FFFFFF"><input name="pwd2" type="password" id = "pwd2_id" title="确认密码">
*</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">电话:</td>
<td bgcolor="#FFFFFF"><input name="phone" type="text" id = "phone_id" title="电话">
*</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">邮箱:</td>
<td bgcolor="#FFFFFF"><input name="email" type="text" id = "email_id" title="邮箱">
*</td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> ;</td>
<td bgcolor="#FFFFFF"><input name="Submit" type="submit" class="btn_grey" value="提交">
 ;
<input name = "Submit2" type="rest" calss="btn_grey" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
(2)将项目部署到服务器中,启动服务器,访问地址http://localhost:8080/CheckInformation/,查看页面效果如下图: