表单验证

最新推荐文章于 2022-01-13 14:20:13 发布

shuping860126

最新推荐文章于 2022-01-13 14:20:13 发布

阅读量124

点赞数

分类专栏： javaScript 文章标签： F# Dreamweaver JavaScript HTML ViewUI

javaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1．有效性验证
下面通过用户的物业名称、类别、租金范围、Email等信息来通过JavaScript验证用户的信息有效性，表单验证效果如图4-4所示。

图4-4 JavaScript在表单上的应用

通过Dreamweaver 8做到图4-4中的效果，其实现代码如下：

Formyanzheng.HTML

<!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;

}

return true;

}

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+" ";

}

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+" ";

}

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"><blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<blockquote>

<p>用户信息 </p>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote>

</blockquote></td>

</tr>

<tr bgcolor="#CAE4FF">

<td width="217" height="22" bgcolor="#CAE4FF"><div align="center">

<blockquote>

<p><span class="style4"> 物业名称：</span></p>

</blockquote>

</div></td>

<td width="257" bgcolor="#CAE4FF"><input name="name" type="text" id="name"></td>

</tr>

<tr bgcolor="#CAE4FF">

<td height="21" bgcolor="#CAE4FF"><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="#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>

<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路">

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="#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="Submit" value="重写"></td>

</tr>

</table>

</form>

</body>

</HTML>

其中<script>标签体中的函数jiance()主要判断物业名称、类别、租金范围、Email等是否为空。

isName()函数是提供给jiance()调用的函数，用来判断物业名称是否为空，后面的函数同理，分别在代码中都有说明，在此不一一列举。

shuping860126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

1．有效性验证下面通过用户的物业名称、类别、租金范围、Email等信息来通过JavaScript验证用户的信息有效性，表单验证效果如图4-4所示。图4-4 JavaScript在表单上的应用通过Dreamweaver 8做到图4-4中的效果，其实现代码如下：Formyanzheng.HTML邮件账户信息...
复制链接

扫一扫