网页平面设计- javascript脚本语言应用

一. 实验目的

1. 利用HTML制作表单内容；

2. 利用CSS美化表单；

3. 利用JavaScript实现特定效果。

二. 实验内容

1. 利用HTML创建表格，创造基本结构

1. 利用CSS美化表格

1. 为文字部分设置边框：由于用户名与密码、邮箱长度不一样，这里我们设置俩个类来进行css设计，用span包裹（span为内敛元素，方便一些），设边框时均为：border:1px solid #000;再运用padding，margin进行调整；可得到：

1. 同样方法，再对输入框进行设置边框：

值得注意的是，当文本显示时，边框会增大

1. 最后设置大边框，将表单框起来，也是运用margin和padding设置边框大小：

1. 利用JavaScript做出特定效果

以用户名为例进行效果设置：

1. 给用户文本绑定blur事件

var username=document.getElementById("userid");

username.οnblur=function()

1. 获得用户名长度，用if语句判断，若用户名为空，向<span>中添加文本内容

var uname=document.getElementById("userid").value;

var userprompt=document.getElementById("userprompt");

 if (uname.length==0)

          {

                userprompt.innerHTML="*用户名不能为空";

                userprompt.style.color="red";

                return false;

           }

1.         //给用户名文本绑定focus事件

 username.οnfοcus=function()

 {

var userpromt=document.getElementById("userprompt");

userpromt.innerHTML="";

}

     密码与邮箱也是相应做法

1.  为了防止表单验证失败也能跳转页面，这里我们需要再设置一个函数来设置return false 和return true俩种效果：

  function usercheck()

  {

      var username=document.getElementById("userid");

   var uname=document.getElementById("userid").value;

      var userprompt=document.getElementById("userprompt");

   var password=document.getElementsByName("pwdname")[0];

      var passwordvalue=document.getElementsByName("pwdname")[0].value;

   var pwdprompt=document.getElementById("pwdprompt");

      var useremail=document.getElementsByTagName("input")[2];

      var emailvalue=document.getElementsByTagName("input")[2].value;

   var emailprompt=document.getElementById("emailprompt");

      if (uname.length==0)

           {

                userprompt.innerHTML="*用户名不能为空";

                userprompt.style.color="red";

                return false;

           }

      if (passwordvalue.length<6)

             {

                  pwdprompt.innerHTML="*密码长度至少6位";

                pwdprompt.style.color="red";

                   return false;

             }

if(emailvalue.indexOf("@")==-1)

             {

                 emailprompt.innerHTML="*邮箱地址不正确";

              emailprompt.style.color="red";

                   return false;

             }

      return true;

   }

三. 实验心得

1. 通过对表单验证的制作，更深刻了解了HTML CSS和JavaScript三者之间的联系。
2. 对于JavaScript的属性能够更加的熟悉，也了解到了JavaScript的逻辑顺序。
3. 对于JavaScript跳转页面还不能熟悉掌握。
4. 不能让警告的文字出现，又不影响边框大小。