找回密码
 立即注册
社区广播台
      查看: 23497|回复: 3

      网页制作中关于网页表单提交的制作

      [复制链接]
      发表于 2014-1-19 19:05:21 | 显示全部楼层 |阅读模式
           参考主题:实例学习网页制作中常用的网页表单的应用
      , |" ~: 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    [恶搞]表格中单元格之间分隔线的隐藏方法_
      您需要登录后才可以回帖 登录 | 立即注册

      本版积分规则

      快速回复 返回顶部 返回列表