|
|
参考主题:实例学习网页制作中常用的网页表单的应用 / g4 W/ w8 \, b& D' z c
表单的提交
) q: c l e$ x 表单的提交
+ B( w+ C2 O i# G* _; N 既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以7 U7 B- |2 `* j& \, c2 h$ t
既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。
/ X4 U2 `* Z4 F; ?/ Y# O 1.数据的检验
- ]; Z, ?/ i, [% F' |- w( N: p) Y 数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。
3 w% d# g" M4 Z1 e' G+ m1 G 不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。4 J4 u. l P0 j8 ]3 u" o" f
样例:必填项,以及简单的数据类型检验
. i0 K& l/ ~) a. k 功能实现分析:/ g4 g* j: h+ O: x
本例给表单添加了onSubmit事件,通过onSubmit="return
9 {( z2 h- `( I! @- Q3 Y) b CheckDate()"指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;1 P- T' T* [9 o4 d( k5 h
数据检验的函数如下: <script> function& s1 a; C" I+ a& P
CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value;
- i1 j; w9 @- T- }1 W userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if
# u2 V4 |3 m- |. P! G& A7 F1 E (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus();# a( E# [: c# `7 J, I
return false; }else{ //如果没有输入Email,上海搬场公司或者Email地址错误(不含@) if7 `9 S5 ^0 T/ H6 M) ?4 V# y
((userEmail=="")||(userEmail.indexOf("@")==-1)) {9 r; Z, T$ y/ k: d) l8 m
alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return& k7 Z" A6 {8 R
false; }else return true; } }2 C: R9 J" h6 u4 g
</script>
+ R3 n9 z! F- T1 s 以下带*的必须输入:9 `0 P! B% c' e0 C
姓名: *
c0 b7 a9 F: d5 W- X7 y# ~. s Email: *
% i' A8 g2 y, I, {( c. X2 l9 n 表单的分支提交* o' C# W# M7 U, I& S/ Z5 T
有的时候http://www.zyldjd.com/,大众搬家表单需要根据用户的选择,提交到不同的程序,怎么做呢?通过脚本来检测用户的选择分支,从而向不同的程序提交表单,看看样例:
" u# |2 @0 `1 }# A. q- ~9 s1 U 样例:分支提交' [2 `9 [ T- h6 ?' ~- T
用户名: 密码:
& `8 ^% U8 l: I( ] 公司用户 个人用户8 `+ P% W. W7 A( w- S6 A
功能实现分析:! T _5 U4 M8 g; ]4 B0 l4 O
这里首先用到的是form的onSubmit="TwoSubmit(this)"! C: J; X. B) `! J$ _3 u4 `
然后根据选择的分支http://www.sh6997.comhttp://www.xiangpaiming.com,上海搬家公司来分别递交到不同的程序,大众搬场TwoSubmit()函数如下:6 J: K+ K( h6 w: b- a! ]
<script> function TwoSubmit(form){ if, D |# B" {! c
(form.Ref[0].checked){ form.action = "cop.asp";//这里是分之一 }else{
) ~2 |3 G1 w% f# @8 l form.action = "ind.asp";//这里是分之二 } form.submit(); }# W3 A" y. S+ T0 }$ [' o5 k$ F
</script>
/ `% g, @- g; @! r6 `7 Y 用任何元素提交表单( H' I! R! `7 H1 K. A7 z
是不是只有按钮或者图片按钮才能提交表单呢?当然不是,实际上,任何页面元素都可以提交表单,不过嘛,都是通过脚本来完成的,下面我们就使用链接来代替Submit按钮:
* C% ^7 Q& k: D( M8 o8 V" d: A, L [恶搞]表格中单元格之间分隔线的隐藏方法_ |
|