|
|
参考主题:实例学习网页制作中常用的网页表单的应用
, |" ~: z3 B$ s# u 表单的提交* |+ t' T+ c/ r
表单的提交+ V: o2 V# h- E
既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以
, y0 n$ z; F" q: f; l% u 既然表单是用来采集用户输入的数据,那么,就应该保证用户的数据被准确地提交到预定的地点,也就是说,我们在表单提交的时候,应该对用户的数据进行检验,一来可以避免用户误输数据,二来可以避免用户输入非法的,或者说不合格的数据;检验合格以后,还要保证用户的数据提交到特定的程序。
# K! x! i; z9 N 1.数据的检验5 o$ F2 C: A9 `3 U+ `+ f
数据的检验,通常有两种程序:客户端检验和服务器端检验。客户端检验,比较快,服务器端检验,相对来说比较慢,为了确保安全,通常同时采用,这样就可以避免用户刻意破坏。
% x6 F+ m/ r- A: s2 R/ L 不管采用什么方式,数据检验的原理都是一样的,一旦用户输入的数据不符合规定,就报错,要求用户重新输入,客户端检验常使用Javascrip脚本,服务器端的视系统而定,本文不对数据检验的具体程序设计进行探讨,仅仅列举几个例子来说明。
2 K) d9 B1 Z' ^3 b+ n0 r5 K 样例:必填项,以及简单的数据类型检验
' }0 s% A8 Q w. w! Y 功能实现分析:. V* g8 a! l7 Z1 [' s; `
本例给表单添加了onSubmit事件,通过onSubmit="return( j6 ~: `: l8 v' h/ Y) K7 a
CheckDate()"指定提交前,必须通过函数CheckDate()来检验,如果不合格,返回输入数据;
3 l% p- ]" m' _; x4 { 数据检验的函数如下: <script> function1 R/ A# H7 F2 j; u1 j
CheckDate(){ //取得输入的数据 userName = document.RedForm.userName.value;
6 _. {2 k# W" b5 Q userEmail = document.RedForm.userEmail.value; //如果没有输入姓名 if
$ w5 V9 a f% ?; P (userName=="") { alert("请输入姓名"); document.RedForm.userName.focus();
3 X4 P& L9 \4 r8 i Q( | return false; }else{ //如果没有输入Email,上海搬场公司或者Email地址错误(不含@) if& D3 |7 U7 g) a3 _; \' C6 \
((userEmail=="")||(userEmail.indexOf("@")==-1)) {
8 v+ h3 \3 _* n1 n+ g alert("请重新输入Email地址"); document.RedForm.userEmail.focus(); return
( D$ X3 E* v4 j- z0 L false; }else return true; } }
6 q6 d4 B& p7 Y$ _ </script># M# p: m5 o5 o0 X/ C+ z( k
以下带*的必须输入:2 ?8 g% b4 d; s( g2 v. l
姓名: *
5 Y5 [2 P3 U2 n4 s Email: *
8 s, b" a. u" Z6 ` 表单的分支提交5 b( y) \8 H8 c0 b, g5 ^5 r B# e6 M
有的时候http://www.zyldjd.com/,大众搬家表单需要根据用户的选择,提交到不同的程序,怎么做呢?通过脚本来检测用户的选择分支,从而向不同的程序提交表单,看看样例: d' G {) x+ W% w( N5 \1 U
样例:分支提交; ?' O) R" E+ c: e {
用户名: 密码:
8 M* P( \* o( Y' q* x0 k 公司用户 个人用户$ k4 p( L. o9 o. n9 B4 d/ J
功能实现分析:" _! ^2 w, p7 Z, ^' G1 C
这里首先用到的是form的onSubmit="TwoSubmit(this)"/ l% c4 u) B2 _0 G2 b+ G/ Y
然后根据选择的分支http://www.sh6997.comhttp://www.xiangpaiming.com,上海搬家公司来分别递交到不同的程序,大众搬场TwoSubmit()函数如下:8 ]2 F, c% m' P
<script> function TwoSubmit(form){ if0 @9 M# ` V' I, D f9 g7 {
(form.Ref[0].checked){ form.action = "cop.asp";//这里是分之一 }else{7 { B" V- u. W$ s8 H! Q7 H0 z
form.action = "ind.asp";//这里是分之二 } form.submit(); }8 w( v, b, x* Z% ^5 b6 h
</script>
( w- i/ v6 I; l6 `# A: Q0 c 用任何元素提交表单
6 `5 _/ t. l; A 是不是只有按钮或者图片按钮才能提交表单呢?当然不是,实际上,任何页面元素都可以提交表单,不过嘛,都是通过脚本来完成的,下面我们就使用链接来代替Submit按钮:
, W2 c5 x2 b4 X+ a0 w: |4 Y [恶搞]表格中单元格之间分隔线的隐藏方法_ |
|