这个是我参加那个网页编程测试的题,无非也就是用JS来验证表单了,题目要求你用DW先做出如下图的界面:
然后再用javascript来验证填写的信息,呵呵, 这个对大家来说应该都是很简单的,整个HTML的代码如下:
<html>
<head>
<title>邮件账户信息</title>
<script language="javascript">
var name=""; //物业名称
var leibie=""; //物业类别
var zhujin=""; //租金范围
var email=""; //EMAIL
var luxian=""; //公交路线
var pic="" //实物图片
function check_name() //验证物业名称
{
if(document.myform.name.value == "")
{
alert("物业名称为空!\n请填写完整!");
document.myform.name.focus();
return false;
}
else
name=document.myform.name.value;
}
function check_leibie() //验证物业类别
{
var temp=document.myform.leibie.value;
if(temp == "")
{
alert("请选择物业类别!");
return false;
}
else
{
switch(temp)
{
case 'g': leibie="公寓"; break;
case 's': leibie="商品房"; break;
}
}
}
function check_zhujin() //验证租金范围
{
var temp=document.myform.zhujin.value;
if(temp == "")
{
alert("请选择租金范围!");
return false;
}
else
{
switch(temp)
{
case '1': zhujin="2000~3000元"; break;
case '2': zhujin="3001~4000元"; break;
case '3': zhujin="4001元以上"; break;
}
}
}
function check_email() //验证EMAIL
{
var temp=document.myform.email.value;
if(temp == "")
{
alert("email为空!\n请填写完整!");
document.myform.email.focus();
return false;
}
else if(temp.indexOf("@",0) == -1)
{
alert("email没有包含@符号!\n请重新填写!");
document.myform.email.focus();
return false;
}
else
email=document.myform.email.value;
}
function check_luxian() //验证公交路线
{
var flag=0; //设置标志位,0表示没有选择,1表示至少选择了一个
for(var i=0;i<document.myform.bus.length;i++)
{
if(document.myform.bus[i].checked == true)
{
luxian+=document.myform.bus[i].value + " ";
flag=1;
}
}
if(flag == 0)
{
alert("公交线路没有选择!\n请至少选择一项");
return false;
}
}
function check_file() //验证文件域
{
var temp=document.myform.file.value;
if(temp == "")
{
alert("请选择实物图片");
return false;
}
pic="<img src='" + temp + "' width='400' height='300' align='top' alt='图片显示不了说明您选择的不是有效的图片格式'>"
// pic=temp; 上面的是显示图片的,这里是直接显示文件域的value,感觉还是显示图片的好哇,哈哈。。。
}
function wangchen() //完成按钮
{
if(check_name() == false) //验证物业名称
return;
if(check_leibie() == false) //验证物业类别
return;
if(check_zhujin() == false) //验证租金范围
return;
if(check_email() == false) //验证email地址
return;
if(check_luxian() == false) //验证公交路线
return;
if(check_file() == false) //验证文件域
return;
printf(); //打印出结果的函数
}
function printf() //打印出结果的函数
{
document.write("<body bgcolor='#cae4ff'><h3>输入成功</h3>以下是您输入的信息:<p>");
document.write("物业名称:" + name + "<br>");
document.write("物业类别:" + leibie + "<br>");
document.write("租金范围:" + zhujin + "<br>");
document.write(" EMAIL:" + email + "<br>");
document.write("公交线路:" + luxian + "<br>");
document.write("实物图片:" + pic + "<br>");
document.write("</body>");
}
</script>
<style type="text/css">
<!--
body,td,th {
font-size: 9pt;
}
.STYLE1 {
font-size: 12pt;
font-weight: bold;
}
.thininput{
border:1px solid #00CCFF;
background-color:#cae4ff;
}
-->
</style></head>
<body>
<form enctype="multipart/form-data" name="myform">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="30" bgcolor="cae4ff"><div align="center" class="STYLE1"> 请输入房源的信息
</div></td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> 物业名称:
<input name="name" type="text" class="thininput" id="name" size="18" maxlength="18" /></td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> 物业类别:
<select name="leibie" class="thininput" id="leibie">
<option value="g" selected="selected">公寓</option>
<option value="s">商品房</option>
</select>
</td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> 租金范围:
<select name="zhujin" class="thininput" id="zhujin">
<option value="1">2000-3000</option>
<option value="2">3001-4000</option>
<option value="3">4001以上</option>
</select>
</td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> EMAIL:
<input name="email" type="text" class="thininput" id="email" size="18" maxlength="18" /></td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> 公交路线:
<input name="bus" type="checkbox" id="bus" value="300路" />
300 <input name="mybox" type="checkbox" id="bus" value="720路" />
720 <input name="mybox" type="checkbox" id="bus" value="356路" />
356 <input name="mybox" type="checkbox" id="bus" value="114路" />
114 <input name="mybox" type="checkbox" id="bus" value="120路" />
120</td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> 实物图片:
<input name="file" type="file" class="thininput" /></td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"> </td>
</tr>
<tr>
<td height="30" bgcolor="cae4ff"><div align="center">
<input type="button" name="Submit" value="完成" onclick="wangchen()" />
<input type="reset" name="Submit2" value="重写" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
|