JS表单验证应用实例

最新推荐文章于 2020-11-28 22:23:30 发布

ivolcano

最新推荐文章于 2020-11-28 22:23:30 发布

阅读量364

点赞数

分类专栏：平时作业

本文链接：https://blog.csdn.net/ivolcano/article/details/50825107

版权

平时作业专栏收录该内容

14 篇文章 0 订阅

订阅专栏

下面通过用户的物业名称、类别、租金范围、Email等信息来通过JavaScript验证用户的信息有效性。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/HTML4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>邮件账户信息</title>
<style type="text/css">
</style>
<script language="javascript">
function jiance(){
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() {
uname=f.name.value;
if(f.name.value=="") {
alert("请输入物业名称！");
f.name.focus();
return false;
}
}

function isemail() { //验证输入的Email
uemail=f.email.value;
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+"&nbsp";
}
if(document.form1.checkbox2.checked==true) {
get=get+document.form1.checkbox2.value+"&nbsp";
}
if(document.form1.checkbox3.checked==true) {
get=get+document.form2.checkbox3.value+"&nbsp";
}
if(document.form1.checkbox4.checked==true) {
get=get+document.form2.checkbox4.value+"&nbsp";
}
if(document.form1.checkbox5.checked==true) {
get=get+document.form2.checkbox5.value+"&nbsp";
}
return true;
}
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<table width="604" height="192" border="1" cellpadding="0" cellspacing="1">
<tr>
<td colspan="2" bgcolor="#CAE4FF" align="center">用户信息</td>
</tr>
<tr bgcolor="CAE4FF">
<td width="217" height="22" bgcolor="#CAE4FF" align="center">物业名称：</td>
</tr>
<tr>
<td height="21" bgcolor="#CAE4FF" align="center">类别:</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="#CAE4FF">
<td height="31" bgcolor="#CAE4FF" > <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 bgcolor="CAE4FF">
<td height="20" bgcolor="#CAE4FF"><div align="center"><span >email:</span></div></td>
<td><input name="email" type="text" id="email" class="td_bg"></td>
</tr>
<tr bgcolor="CAE4FF">
<td height="22" bgcolor="CAE4FF" ><div align="center"><span class="style4">公交路线：</span></div></td>
<td><p>
<input name="checkbox1" type="checkbox" id="checkbox1" value="300路" checked>300
<input name="checkbox2" type="checkbox" id="checkbox2" value="720路" checked>720
<input name="checkbox3" type="checkbox" id="checkbox3" value="366路" checked>114
<input name="checkbox5" type="checkbox" id="checkbox5" value="120路" checked>120
</p></td>
</tr>

<tr bgcolor="CAE4FF">
<td height="23" bgcolor="CAE4FF" ><div align="center"><span class="style4">实物图片</span>：</div></td>
<td>input type="file" name="file"</td>
</tr>
<tr>
<td> </td>
<td><input type="button" name="Submit" value="完成" οnclick="jiance()">
<input type="reset" name="Sunmit" value="重写"></td>
</tr>

</table>
</form>
</body>
</html>