表单验证

js860126

浏览: 22479 次
性别:
来自: 泰州

最近访客更多访客>>

心若水寒

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

F#Dreamweaver JavaScript HTML

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="完成" onclick="jiance()" >

      <input type="reset" name="Submit" value="重写"></td>

    </tr>

</table>

</form>

</body>

</HTML>

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

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