|
|
参考主题:实例学习网页制作中常用的网页表单的应用
% E( V/ v) I1 M) T# G6 s9 C) h' v 表单的提交) p6 I4 v& ?4 p. d- U
表单的提交
3 K: P8 O7 v+ h5 @ 既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以% Q& E! I& v' {9 F6 ~1 K. W- a
既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。
" i; z) V% _7 U% d) d 1.数据的检验3 C' Z1 j' l }' C. e7 d: o
数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。
/ q- x/ R4 B7 D7 y 不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。! N" |1 W' V- }' X _
样例:必填项,以及简单的数据类型检验
+ U. F9 t$ x# z 功能实现分析:" e# ?/ j ]4 v& ~& o0 f) L. J
本例给表单添加了onSubmit事件,通过onSubmit="return
* D7 K' i5 ]3 f3 h% ^ CheckDate()"指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;& c6 j; n1 p, B* I
数据检验的函数如下: <script> function
9 K2 a7 y; Z$ t CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value;
% ]# h; ^# s% @( j1 O8 Z/ _! v+ ? userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if
8 ]. S; a; w; ] e h5 ~! r1 _ (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus();
z% V7 ^! ^! I1 T, y; Z; G" h return false; }else{ //如果没有输入Email,上海搬场公司或者Email地址错误(不含@) if! }2 V# v @$ t2 |% ^) q q9 z
((userEmail=="")||(userEmail.indexOf("@")==-1)) {! O$ `) o7 o9 Z7 M ^# I
alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return
, ~* h4 F1 m7 u2 Y" P0 k9 @7 h+ K2 ^ false; }else return true; } }5 [: e/ A3 A8 @) O6 A+ H
</script># N* D2 T$ X2 E4 c' D
以下带*的必须输入:
3 e# }! Y# [4 y 姓名: *
9 F. F4 q( R9 n; z* p Email: *
8 ?! w; l& [" k) t 表单的分支提交7 }$ l: J0 Y4 S- i
有的时候http://www.zyldjd.com/,大众搬家表单需要根据用户的选择,提交到不同的程序,怎么做呢?通过脚本来检测用户的选择分支,从而向不同的程序提交表单,看看样例:
3 C5 f0 l5 O; s 样例:分支提交
. Y6 ^) p! F& I" |; N7 C! z 用户名: 密码:4 N# H& B/ H1 ]( p- x6 P' ], j9 j
公司用户 个人用户
v9 d% P' p* G8 d$ u# } 功能实现分析:% V) A# [( E; j& r1 N( F9 F b# ?
这里首先用到的是form的onSubmit="TwoSubmit(this)"( E7 X8 M- F- y$ F
然后根据选择的分支http://www.sh6997.comhttp://www.xiangpaiming.com,上海搬家公司来分别递交到不同的程序,大众搬场TwoSubmit()函数如下:5 i, X0 U/ ]. ~/ V* G. d R& o& |: J6 g
<script> function TwoSubmit(form){ if" u4 l, ^' Q% k( k3 Y+ s
(form.Ref[0].checked){ form.action = "cop.asp";//这里是分之一 }else{, A* Q8 Z$ K+ Q2 M
form.action = "ind.asp";//这里是分之二 } form.submit(); }2 c: U p' V8 Q. j4 p
</script>& z4 C( @# b7 k0 j" o
用任何元素提交表单
) ?# T ^9 e( Q. B# k 是不是只有按钮或者图片按钮才能提交表单呢?当然不是,实际上,任何页面元素都可以提交表单,不过嘛,都是通过脚本来完成的,下面我们就使用链接来代替Submit按钮:) G/ }8 F5 i* W q0 q$ b
[恶搞]表格中单元格之间分隔线的隐藏方法_ |
|