|
参考主题:实例学习网页制作中常用的网页表单的应用
$ c w- n5 Q( j: I4 V' Z/ C 表单的提交
. C: x$ Y7 E( T, _, M 表单的提交
$ }/ z7 [8 C& w) t8 T* R 既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以$ O7 h, H! @/ [" ]
既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。
3 H1 R' ]2 V- f" R! F. q; Y' r 1.数据的检验
+ n5 x J2 A! v1 W 数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。
! O6 q# N0 M( x- v! ]& k 不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。& m {( h2 Y8 H/ V, r1 H+ x
样例:必填项,以及简单的数据类型检验4 l) K' X5 _$ }5 w/ x, f
功能实现分析:
! p( x0 O4 p3 J4 }' w$ n6 E' _4 j 本例给表单添加了onSubmit事件,通过onSubmit="return% {6 {$ ^9 G: T+ v0 j
CheckDate()"指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;
* L9 J9 J/ L7 ~5 b& M7 q 数据检验的函数如下: <script> function3 H& N4 Z4 _) l7 i, m/ r3 y
CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value;
; K5 ~; w8 `3 t1 W userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if
; X- ?' F0 @6 S9 z (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus();, f9 {$ i/ [) o, W/ J2 w& ^/ U
return false; }else{ //如果没有输入Email,上海搬场公司或者Email地址错误(不含@) if: ?" Z, j( Z( b% u1 Z6 T
((userEmail=="")||(userEmail.indexOf("@")==-1)) {
4 I& S( Q( c6 k# e5 u+ _ alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return( v3 }$ h# |9 l7 M6 E# K# O
false; }else return true; } }0 w- h+ E: y- V& R. Q
</script>
4 T% b z3 S0 F- e1 l 以下带*的必须输入:
& m$ X$ |( X3 o% R @7 T 姓名: *
8 v' Z2 d& ~8 X' {4 w Email: *7 j' L+ g0 a" f/ h# t/ {# @
表单的分支提交
8 z F4 b& `. i8 N% T5 Q9 } 有的时候http://www.zyldjd.com/,大众搬家表单需要根据用户的选择,提交到不同的程序,怎么做呢?通过脚本来检测用户的选择分支,从而向不同的程序提交表单,看看样例:, u. v4 I& Z% n- z6 ]6 o
样例:分支提交6 j* p* g$ L' o) ~/ o# L6 P u) O
用户名: 密码:
/ P$ W7 h% L0 K" u 公司用户 个人用户: g7 p; I& w7 t }
功能实现分析:
, Y1 e l9 Z# O# u7 e2 N5 h( e, A 这里首先用到的是form的onSubmit="TwoSubmit(this)"0 p$ X9 z! Q3 ]' {* Y
然后根据选择的分支http://www.sh6997.comhttp://www.xiangpaiming.com,上海搬家公司来分别递交到不同的程序,大众搬场TwoSubmit()函数如下:
6 b. [3 e2 n4 s <script> function TwoSubmit(form){ if4 W; k0 s6 f; T; R. E# T% N9 ?
(form.Ref[0].checked){ form.action = "cop.asp";//这里是分之一 }else{3 J+ V6 P9 H/ S6 H# ? U
form.action = "ind.asp";//这里是分之二 } form.submit(); }% i& d5 i: Z6 A) _
</script>
8 f0 V) |' t' F 用任何元素提交表单
" F( s; n5 [& m* s3 m- ` 是不是只有按钮或者图片按钮才能提交表单呢?当然不是,实际上,任何页面元素都可以提交表单,不过嘛,都是通过脚本来完成的,下面我们就使用链接来代替Submit按钮:
' E8 Y0 e4 o0 S- e, h% g [恶搞]表格中单元格之间分隔线的隐藏方法_ |
|