1、制作静态网页,用于个人信息的提交前验证。
内容要求:
1、 编写一个静态页面,用于填写个人的基本信息,包含姓名、性别、年龄、民族、身份证号、家庭住址、上传1张个人照片(可用其他图片代替),页面下方有一个名为“验证”的按钮。
2、 点击“验证”按钮后,对填写信息进行验证,包括:姓名不能为空,年龄不能超过200,身份证号只能15倍或者18位。如果信息都正确,弹出提示框:验证成功;如果有不合法的信息,则弹出提示框,显示错误的信息,如:身份证号不合法。
3、 效果截图至少包括:整个页面未点击“验证”按钮时的完整截图; 验证成功的截图(页面+成功的提示框);验证失败包含具体错误提示的截图(页面+具体错误消息的提示框)。
<%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312"pageEncoding="gb2312"%>
DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>信息验证界面title>
head>
<body>
<script type="text/javascript">function validate(){var num = login.id.value;//alert(num.toString().length);if(login.name.value==""){alert("姓名为空")return;}if (login.age.value>=200){alert("年龄不能超过200")return;}if (num.toString().length!=18 && num.toString().length!=15){alert("身份证号不合法")return;}else {alert("验证成功")login.submit();}}script>
<form name="login"action="NewFile3.jsp" method="post">
<table border="1" align="center" width="55%" cellpadding="1" cellspacing="0"><caption>请输入个人信息caption><tr><td class="btbg"><b>姓名td><td class="btbg"><input type="text" name="name" style="width:200px;height:50px;">td><td class="btbg"><b>性别td><td class="btbg"><input type="text" name="sex" style="width:200px;height:50px;">td><td colspan="" class="btbg" width="15%" rowspan="2"><b>选择上传照片文件<input type="file" name="photo" style="width:200px;height:50px;">td>tr><tr><td class="btbg"><b>民族td><td class="btbg"><input type="text" name="nation" style="width:200px;height:50px;">td><td class="btbg"><b>年龄td><td class="btbg"><input type="text" name="age" style="width:200px;height:50px;">td>tr><tr><td width="8%" class="btbg" colspan="1"><b>身份证号td><td colspan="4" width="8%" class="btbg"><input type="text" name="id" style="width:700px;height:100px;">td>tr><tr><td class="btbg" rowspan="2"><b>家庭住址td><td colspan="4" width="8%" class="btbg"><input type="text" name="address" style="width:700px;height:100px;">td>tr>
table><input type="button" value="验证" onClick="validate()">form>
body>
html>
页面二,用于验证提交的信息
<%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312"pageEncoding="gb2312"%>
DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>您已经登录title>
head>
<body>
<h1> 用户验证成功h1><%request.setCharacterEncoding("gb2312");String name=request.getParameter("name");out.println("用户名"+name+"br>");String sex=request.getParameter("sex");out.println("用户性别"+sex+"br>");String age=request.getParameter("age");out.println("用户年龄"+age+"br>");String nation=request.getParameter("nation");out.println("民族"+nation+"br>");String id=request.getParameter("id");out.println("身份证号"+id+"br>");String address=request.getParameter("address");out.println("地址"+address+"br>");%>body>
html>