• 使用JavaScript与Servlet实现客户端与服务器端验证


    表单的验证有两种:

    客户端验证:

    --减少服务器负担。

    --缩短用户等待时间。

    --兼容性难。(不同浏览器对脚本语言的兼容性都是不同的)

    服务器端验证:

    --统一确认。

    --兼容性强。

    --服务器负载重。

    客户端验证不写也是允许的,但服务器端验证必须有。用户可以(通过查看源代码直接输入地址)绕过客户端验证,如果服务器端的屏障没做好,插入到数据库的数据就是错误的,很麻烦。晚上的系统一般都有双重验证

    使用使用JavaScript实现客户端验证:

    验证条件:用户名、密码、重复密码不为空,密码和重复密码相同,长度6-10.

     1 //myLogin.jsp
     2 <html>
     3     <head>
     4         <script type ="text/javascript">
     5              function validate()
     6              {
     7                     var usern = document.getElemertBYid("username1");
     8                     var pasw = document.getElemertBYid("password1");
     9                     var repasw = document.getElemertBYid("repassword1");  
    10                     if(usern.value.length == 0)
    11                     {
    12                           alert("username can't be blank!")
    13                           return false;  
    14                     }
    15 
    16                     if(pasw.value.length < 6 || password.value.length > 10)
    17                     {
    18                           alert("length of password is invalid!")
    19                           return false;  
    20                     }
    21                     if(repasw.value.length < 6 || repasw.value.length > 10)
    22                     {
    23                           alert("length of repassword is invalid!")
    24                           return false;  
    25                     }
    26                      if(pasw.value.length != repasw.value.length )
    27                     {
    28                           alert("password not the same!")
    29                           return false;  
    30                     }
    31 
    32              }
    33         </script>
    34     </head>
    35     <body>
    36         <form onsubmit="return validate()" action="someServlet">
    37 
    38          username:<input type="text" name="username" id="username1"><br>
    39          password:<input tytype="text" name="password" id="password1"><br>
    40          repassword:<input tytype="text" name="repassword" id="repassword1"><br>
    41          <input type="submit" value="submit">
    42 
    43         </form>
    44     </body>
    45 </html>

    script通常写在<head></head>里。

    <script></script>表示里面使用js脚本。

    使用js最常用的就是定义函数。没有那么多东西,就是function yourf(){} ,其所有的变量也都是由var定义的。 对于javascript也常用alert

    要获得下面表单的东西,方式有很多 :

    1、给控件增加id属性。id属性不是被服务器端使用的,是被客户端javascript脚本使用的。

    document是javascript内置对象,代表当前文档本身。 javascript不强制要有分号结束。

    onsubmit="return validate();提交的时候调用该函数。分号可无。返回真才提交给服务器。

    在js里点什么并没有全部的智能提示,没出现也可以用。

    这时,用户可以这么做:

    查看浏览器的该源代码,由<form onsubmit="return validate()" action="someServlet">发现表单提交到someServlet,并且有username、password、repassword3个变量。那他可以直接在浏览器url输入

    http://……/someServlet?username=&password=123&repassword=456

    这样用户就可以绕过客户端验证直接到达服务器端了。所以服务器端验证必须有。

    另外,javascript里面数组长度确定了还可以改变大小,和集合一样:

     1   //myLogin.jsp
     2   <html>
     3       <head>
     4           <script type ="text/javascript">
     5                function validate()
     6                {
     7                       //var usern = document.getElemertBYid("username1");
     8                       //var pasw = document.getElemertBYid("password1");
     9                       //var repasw = document.getElemertBYid("repassword1");
    10                       
    11                       var usern = document.getElementsByName("username1")[0];
    12                       var pasw = document.getElementsByName("username1")[0];
    13                       var resw = document.getElementsByName("username1")[0]; 

    用javascript实现全选:

     1 <html>
     2 <head>
     3 <script type="text/javascript">
     4     function selectAll()
     5     {
     6          var allMails = document.getElementsByName("allMails");
     7          var mails = document.getElementsByName("email");
     8          if(allMails.checked)
     9          {
    10              
    11              for(var i = 0; i < mails.length;i++)
    12              {
    13                     mails[i].checked = true;
    14              } 
    15          }  
    16         else
    17         {
    18               for(var i = 0; i < mails.length;i++)
    19               {
    20                       mails[i].checked = false;
    21               }
    22         } 
    23     }
    24 </script>
    25 </head>
    26 <body>
    27 全选<input type="checkbox" onclick="selectAll" name="allMails"><br><br><br>
    28 <input type="checkbox" name="email"><br>
    29 <input type="checkbox" name="email"><br>
    30 <input type="checkbox" name="email"><br>
    31 <input type="checkbox" name="email"><br>
    32 <input type="checkbox" name="email"><br>
    33 <input type="checkbox" name="email"><br>
    34 <input type="checkbox" name="email"><br>
    35 <input type="checkbox" name="email"><br>
    36 
    37 </body>
    38 </html>

     另外,除了document.getElementsByName还可以document.getElementsByTagName。通过标签(像input这些标签)的名字获得元素,打印出来看看。如:

    1 // in the function selectAll: 
    2 var nodes=document.getElementsByTagName("input");
    3 for(var i = 0 ; i <nodes.length;i++)
    4 {
    5    alert(nodes[i]);
    6    alert(nodes[i].type);
    7 }

    使用Servlet实现服务器端验证:

    验证条件也是:用户名、密码、重复密码不为空,密码和重复密码相同,长度6-10.

    也是那个表单:给表单增加 action="someServlet" action="ValidateServlet"

     1   <body>
     2          <form onsubmit="return validate()" action="someServlet" action="ValidateServlet">
     3  
     4           username:<input type="text" name="username" id="username1"><br>
     5           password:<input tytype="text" name="password" id="password1"><br> 
     6           repassword:<input tytype="text" name="repassword" id="repassword1"><br>
     7           <input type="submit" value="submit">
     8  
     9          </form>
    10      </body>

    新建 ValidateServlet.java

     成功页面:

    失败页面:

     

  • 相关阅读:
    idea html,js修改不用重启进程
    opencv rtsp 人脸识别
    The system is running in low-graphics mode UB16
    阿里云ecs 增加虚拟网卡
    rtsp
    mysql5.7报err 1055错误 sql_mode=only_full_group_by
    python 生成requirements.txt
    Linux 保护文件 不给修改
    logback logback.xml常用配置详解(三) <filter>
    logback 常用配置详解(二) <appender>
  • 原文地址:https://www.cnblogs.com/dadada/p/3096085.html
Copyright © 2020-2023  润新知