表单验证实例-优快云博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证应用实例</title>

<style type="text/css">
<!--
.td-b{
BACKGROUND:#ffffoo;border:#6687ba
1px solid
}
</style>

<script language="javascript">

function check(){
f=document.form1;
uname=f.name.value;
uselect1=f.select1.value;
uselect2=f.select2.value;
uemail=f.email.value;
if(isName() && isemail() && isduo()){//判断用户名Email等是否为空
ufile=f.file.value;
if(ufile.length!=0){//判断文件的长度是否为0
document.write("您的物业名称为："+uname+"<br>");
document.write("您的物业类别为："+uselect1+"<br>");
document.write("您的租金范围为："+uselect2+"<br>");
document.write("您的电子邮件地址为："+uemail+"<br>");
document.write("您的公交路线为："+get+"<br>");
document.write("您选择的图片为："+"<img src="+ufile+">");
}else{
alert("您未输入图片，请重新输入！");
f.file.focus();
return false;
}
}
}

function isName(){//验证输入的名字
if(f.name.value==""){
alert("请输入物业的名称");
f.name.focus();
return fales;

}
return true;
}

function isemail(){//验证输入的email
var i;
a=f.email.value.indexOf("@");
b=f.email.value.indexOf(".");
if(f.email.value==""){
alert("请您输入电子邮件");
f.email.focus();
return false;
}

if(a==-1){
alert("您的电子邮件中没有'@'字符，请重新输入！");
f.email.focus();
return false;

}

if(b==-1){
alert("您的电子邮件中没有'.'字符，请重新输入！");
f.email.focus();
return false;

}

if(a>b){
alert("您的电子邮件'@'字符必须在.的前面，请重新输入！");
f.email.focus();
return false;

}
return true;
}

function isduo(){//验证多选
get="";
if(f.checkbox1.checked==true){
get=get+f.checkbox1.value+" ";
}
if(document.form1.checkbox2.checked==true){
get=get+document.form1.checkbox2.value+" ";
}
if(document.form1.checkbox3.checked==true){
get=get+document.form1.checkbox3.value+" ";
}
if(document.form1.checkbox4.checked==true){
get=get+document.form1.checkbox4.value+" ";
}
if(document.form1.checkbox5.checked==true){
get=get+document.form1.checkbox5.value+" ";
}
if(get==""){
alert("您没有选择公交线路！")
return false;

}else{
return true;

}

}

</script>
</head>

<body>
<div align="center"></div>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<table width="604" height ="192" border="1" cellpadding="0" cellspacing ="0">
<tr>
<td colspan="2" bgcolor="#00CCCC"><blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p>用户信息</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</td>
</tr>
<tr bgcolor="#CCFF00">
<td width="217" height="22" bgcolor="#CC0000"><div align="center">
<blockquote>
<p><span class="style4">物业名称:</span></p>
</blockquote>
</div></td>
<td width="257" bgcolor="#FFFF33"><input name="name" type="text" id="name" /></td>
</tr>
<tr bgcolor="#CC0066">
<td height="21" bgcolor="#CC6666"><div align="center"><span class="style4">类别

</span>:</div></td>
<td><select name="select1" id="select1">
<option value="公寓" selected>公寓</option>
<option value="公寓1" >公寓1</option>
<option value="公寓2" >公寓2</option>
</select></td>
</tr>

<tr bgcolor="#CC0066">
<td height="21" bgcolor="#CC6666"><div align="center"><span class="style4">租金范围

</span>:</div></td>
<td><select name="select2" id="select2">
<option value="2000-3000" selected>2000-3000</option>
<option value="3000-3500" >3000-3500</option>
<option value="3500以上" >3500以上</option>
</select></td>
</tr>
<tr bgcolor="#FF3399">
<td height="20" bgcolor="#999933"><div align="center"><span>EMAIL:</span></div></td>
<td ><input name="email" type="text" id="email" class="td-bg" /></td>
</tr>
<tr bgcolor="#CC0033"><td height="20" bgcolor="#CCFF33"><div align="center"><span

class="style4" >公交路线:</span></div></td>
<td><p>
<input name="checkbox1" type="checkbox" id="checkbox1" value="300路" checked="checked"

/>300
<input name="checkbox2" type="checkbox" id="checkbox2" value="320路" />720
<input name="checkbox3" type="checkbox" id="checkbox3" value="366路" />366
<input name="checkbox4" type="checkbox" id="checkbox4" value="114路" />114
<input name="checkbox5" type="checkbox" id="checkbox5" value="120路" />120

</p>
</td>
</tr>
<tr bgcolor="#330066">
<td height="23" bgcolor="#0033CC"><div align="center"><span class="style4">示例图

片:</span>:</div></td>
<td><input type="file" name="file" /></td>
</tr>
<tr>
<td><div align="center"></div></td>
<td><input type="button" name="Submit" value="完成" onClick="check()" >
<input type="reset" name="Submit" value="重置" /></td>
</tr>
</table>
</form>
</body>
</html>
:arrow:

js验证表单的应用