zoukankan      html  css  js  c++  java
  • javascript 表单验证和button跳转

    我们设计一个表单,在本地客户端验证,如果验证不对的话,就不允许提交,非得全部验证完整正确才允许跳转

    1、javascript 代码:

    <html> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 

    <title>JavaScript禁止提交表单</title> 

    <script type="text/javascript"> 

    function getObj(id){ 

    var Obj = document.getElementById(id).value; 

    return Obj; 

    function check(){ 

    if(getObj("test")==""){ 

           alert("文本框输入为空,不能提交表单!"); 

            document.getElementById("test").focus; 

           return false;//false:阻止提交表单

         } 

    </script> 

    </head> 

    <body> 

    <form action="index.htm" method="post" onsubmit="return check()"> 

        <input type="text" name="test" id="test"> 

        <input type="submit" value="提交"> 

    </form> 

    </body> 

    </html>

    2、jquery代码

    <html> 

    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 

    <script type="text/javascript" src="/sunchis/script/jquery-1.3.2.js"></script> 

    <script type="text/javascript"> 

    $(document).ready(function(){ 

        $(":submit[id=tijiao]").click(function(check){ 

    var val = $(":text[id=test]").val(); 

    if(val==""){ 

                alert("文本框输入为空,不能提交表单!"); 

                $(":text[id=test]").focus(); 

                check.preventDefault();//此处阻止提交表单

            } 

        }); 

    }); 

    </script> 

    <title>jQuery禁止提交表单</title> 

    </head> 

    <body> 

    <form action="index.htm" method="post"> 

        <input type="text" name="test" id="test"> 

        <input type="submit" id="tijiao" value="提交"> 

    </form> 

    </body> 

    </html>

    3、超连接跳转

    我们在超连接的时候,常常连接到一个jsp或者Action,比如:
    XXX
         这样做会有一个问题:在test.jsp中,除你传递的param1和param2参数外,你用request.getParamter()取任何原来页面的表单元素都会为空,这是因为这种方式会产生新的request生命周期,在这个request中只会包含超连接后跟随的?param1这种参数, 因此我的建议是如果不是很简单的页面跳转(比如回登陆页面之类的),尽量不要用这种超连接方式。

    4、即传参又提交表单

    如果确实既要像上述第一种方式传参数,又要提交表单的话,可以采取如下方式:
    XXX在脚本中如下处理:
    function commonSubmit(url)
    {
        form1.action="/jsp/managerAction.do?"+url;
        form1.submit();
    }
    提交到Action和jsp是一样的原理,但要记住
    中method=post不能少,否则它只提交表单而不传param参数了(正好和第一种相反:) )

    5、js和java变量互传

    在jsp中经常会遇到把js变量赋给java变量,或者将java变量赋给js变量的情况,在此将通用的处理方法小结如下:
    java变量传给js好办,var a ="";注意要将引号""加上;js变量给java稍微复杂点,一般是在表单中用一个
    的隐藏表单元素,然后在脚本中将js变量值赋给它:
    var jsParamValue=aaaa;
    form1.jsParam.value=jsParamValue;
    然后就可以request.getPrameter("jsPrama");来取得js变量值了

    6、Action中request不会丢掉

    不知大家有没有注意到这个好处,Struts架构中是由一个ActionServlet来作为MVC的控制器角色,jsp页面提交后request是传到ActionServelt中的, 而ActionServlet将根据struts-config.xml中的配置调用相应的Action的方法,并将从jsp中获得的request传给Action类,这样request的生命周期是连续的,即你在jsp中提交了表单,在Action中执行了方法,再回到jsp页面,用request.getParamter()取jsp页面的表单元素值会发现它还在,这对于页面下拉列表等选择项防止复位是一个很好实现方法。

    7、传参时参数有空格的情况

        如果你提交form时带参数,比如form1.action="/jsp/Action.do?param1="+value1,注意如果value1中带有空格的话,你在Action中request.getParameter("param1");取得的只是空格前的值,因此如果有这种带空格的参数在传递时,个人建议是将其转化为特定的字符串,value1=value1.replaceAll(" ","%NULL%");然后在Action中将其转回来:request.getParamter("param1").replaceAll("%NULL%"," ");

    8、form-data属性

    如果你要用来上传文件的话,注意在一个表单中如果有enctype="multipart/form-data"属性的话,是不能接收除type=file外的其他表单元素类型的。 即如果你把和放在同一表单中,而该表单有enctype="multipart/form-data"的话,request.getParamter取text的值会为空, 这个问题的最简单的解决方法是将单独放一个表单,上传文件时只提交该表单即可。

    9、jsp中开模式对话框的方式

    与Swing中类似,jsp中也有模式对话框这一概念,你可以将一个jsp页面放到一个模式对话框中打开,这样在模式对话框消失前,原jsp页面将不可操作。特别适合父页面中要做一些额外的选择操作,而又没必要跳转到新的jsp页面的时候,
    开模式对话框的方式参考如下:
    Function open() {
      If(window.showModelDialog())
      {
          Var returnValue = showModelDialog(“/jsp/模式窗口包含的jsp页面路径”;
                   help=0;status=0;center=yes;dialogWidth=100pt;dialogHeight=100pt”);
       }
    }

  • 相关阅读:
    日期获取以及时间转化
    ddt 接口框架数据处理调用excel 处理
    ddt 测试用例UI运用
    动态验证码处理UI自动化获取处理
    Bug Report For .Net (zz.IS2120@BG57IV3)
    中关村翠湖科技园:高端产业聚集区 (zz.IS2120@BG57IV3.T752270541 .K)
    vc6,windows 7 x64 调试 (IS2120@BG57IV3)
    Excel c#Excel文件的操作[转载]
    NUnit学习 标签、方法 记录与说明
    Excel c#Excel工作进程的创建写 与Excel文件的保存[原创] (20100205 11:09)
  • 原文地址:https://www.cnblogs.com/xmphoenix/p/2034432.html
Copyright © 2011-2022 走看看