网站首页  |   业界社区  |  电信社区  |  技术社区   |  极客社区  |  游戏社区  |  生活社区   |   科技博客  |   同事录
TechWeb-技术社区



标题: [推荐] 网页制作中关于网页表单提交的制作
我是版主
TW中级会员
Rank: 3Rank: 3



UID 80723
精华 7
积分 249
帖子 140
阅读权限 30
注册 2006-8-9
状态 离线
发表于 2007-12-20 10:21 资料 短消息 加为好友
网页制作中关于网页表单提交的制作

    表单的提交

    既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。

    1.数据的检验

    数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。

    不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。

    样例:必填项,以及简单的数据类型检验

    以下带*的必须输入:
    %z8Z"\:m!o3Q/MTechWeb-技术社区姓名:  * ;W2w(w#K0i&o(N8l
    Email:  *
    /r U8v |&A"k  

    功能实现分析:

    本例给表单添加了onSubmit事件,通过指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;
    ,`-s%X0H'A0G-q'A8PTechWeb-技术社区数据检验的函数如下: <script> function CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value; userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus(); return false; }else{ //如果没有输入Email,或者Email地址错误(不含@) if ((userEmail=="")||(userEmail.indexOf("@")==-1)) { alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return false; }else return true; } } </script>

    表单的分支提交

    有的时候,表单需要根据用户的选择,提交到不同的程序,怎么做呢?通过脚本来检测用户的选择分支,从而向不同的程序提交表单,看看样例:

    样例:分支提交

    用户名:  密码:  
    $F/q6U8A5o&q2F!i 公司用户  个人用户  

    功能实现分析:

    这里首先用到的是form的 然后根据选择的分支,来分别递交到不同的程序,TwoSubmit()函数如下: <script> function TwoSubmit(form){ if (form.Ref[0].checked){ form.action = "cop.asp";//这里是分之一 }else{ form.action = "ind.asp";//这里是分之二 } form.submit(); } </script>

    用任何元素提交表单

    是不是只有按钮或者图片按钮才能提交表单呢?当然不是,实际上,任何页面元素都可以提交表单,不过嘛,都是通过脚本来完成的,下面我们就使用链接来代替Submit按钮:


引用 回复 顶部
我是版主
TW中级会员
Rank: 3Rank: 3



UID 80723
精华 7
积分 249
帖子 140
阅读权限 30
注册 2006-8-9
状态 离线
发表于 2007-12-20 10:21 资料 短消息 加为好友

    样例:用链接来提交表单

    功能实现分析:通过来提交表单;用来复位表单,这样一来,任何一个元素都可以实现提交表单了。

    下拉跳转菜单

    在Dreamweaver中,可以很方便地建立基于表单的下拉菜单,为了兼顾非Dreamweaver用户,这里讲述一下这种技巧。

    样例:基于表单的下拉跳转菜单

    程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛6h3w5L-\-t6s Z9D

    功能实现分析:实际上,这里用到了一个函数,用于向选择的地址跳转,<script language="javascript"> function FormMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; }</script>然后,给下拉选择框赋予一个事件,就可以了。

    用Email提交表单(只适合Outlook用户,不适合Foxmail用户


引用 回复 顶部
游客
未注册









发表于 2008-6-18 15:22 资料 短消息 加为好友
fag


引用 回复 顶部
游客
未注册









发表于 2008-6-18 15:22 资料 短消息 加为好友
time


引用 回复 顶部
zhongqihezu
TW注册会员
Rank: 2



UID 138905
精华 0
积分 74
帖子 43
阅读权限 20
注册 2008-7-30
状态 离线
发表于 2008-8-7 17:12 资料 短消息 加为好友
上海老牌服务商 5 岁了 大酬宾活动!TechWeb-技术社区7i'X!G _0w*U
1.6G  135元/年
;j)F#e'i&w+Z/e&I7Z7`!d1.6G买一送二 只需198元/年 随时退款承诺!!
*q"G+])T#J程序开发,操作系统,服务器,源码下载,Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛解除您的后顾之忧 没诚意勿扰~





1.6G买一送二 只需198元/年 随时退款承诺!!
QQ: 691884824 www.hezuchina.com
引用 回复 顶部
查看积分策略说明快速回复主题
选项 标题 Smilies
禁用 URL 识别
禁用 Smilies
禁用 Discuz!代码
使用匿名发帖
使用个人签名
接收新回复邮件通知
内容





当前时区 GMT+8, 现在时间是 2008-8-30 14:28
京ICP证060517号

本论坛支付平台由支付宝提供
携手打造安全诚信的交易社区 Powered by Discuz! 5.5.0 © 2001-2008 Comsenz Inc.
Processed in 0.072793 second(s), 8 queries

清除 Cookies - 联系我们 - TechWeb.com.cn - Archiver - WAP