黑马程序员技术交流社区

标题: 表单校验 [打印本页]
作者: ozt6719393    时间: 2013-5-22 17:10
标题: 表单校验
麻烦同学们做个表单校验，规则自己定，重要看思路
作者: Super_Class    时间: 2013-5-22 17:18

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>无标题文档</title>
  7. </head>

  9. <body>
  10. <legend>
  11.         <caption>员工信息录入</caption>
  12.     <table border="1" cellpadding="5" cellspacing="0">
  13.             <tr>
  14.                 <td>真实姓名(不能为空，没有其他要求)</td>
  15.             <td><input type="text" id="realname"/></td>
  16.         </tr>
  17.         <tr>
  18.                 <td>登录名(不能为空，长度应该在5——8之间，可以包含中文字符（一个汉字算一个字符）)</td>
  19.             <td><input type="text" id="username"/></td>
  20.         </tr>
  21.         <tr>
  22.                 <td>密码(不能为空，长度6-12字符或数字，不能包含中文数字)</td>
  23.             <td><input type="password" /></td>
  24.         </tr>
  25.         <tr>
  26.                 <td>重复密码(不能为空，长度6-12字符或数字，不能包含中文数字)</td>
  27.             <td><input type="password" /></td>
  28.         </tr>
  29.         <tr>
  30.                 <td>真实姓名(不能为空，没有其他要求)</td>
  31.             <td><input type="text" /></td>
  32.         </tr>
  33.         <tr>
  34.                 <td>性别(必选其一)</td>
  35.             <td><input type="radio" name="sex" value="nan"/>男
  36.             <input type="radio" name="sex" value="nv"/>女</td>
  37.         </tr>
  38.         <tr>
  39.                 <td>身份证(15或18位)</td>
  40.             <td><input type="text" /></td>
  41.            
  42.         </tr>
  43.         <tr>
  44.         <td></td>
  45.         <td></td>
  46.         <td><input type="button" value="保存" id="ok"/></td></tr>

  48.     </table>
  49. </legend>
  50. </body>
  51. <script type="text/javascript">
  52. window.onload = function()
  53. {
  54.         document.getElementById("ok").onclick = function()
  55.         {
  56.                 /*var realname = document.getElementById("realname").value;
  57.                 if(realname==""||realname=="null"||realname=="undefine")
  58.                 {
  59.                         document.getElementById("realname").focus();
  60.                         alert("输入真实姓名");                       
  61.                         return false;
  62.                 }*/
  63.        
  64.        
  65. /***************************************************************************************/
  66.                 var username = document.getElementById("username").value;
  67.                 if(username==""||username=="null"||username=="undefine")
  68.                 {
  69.                         document.getElementById("username").focus();
  70.                         alert("输入用户名");                       
  71.                         return false;
  72.                 }
  73.                 //验证登录名不少于五个字符
  74.                 var userreg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]{0-4}$");
  75.                 var flag = userreg.test(username);
  76.                 if(flag)
  77.                 {
  78.                         alert("您输入的登录名不能少于5个字符");
  79.                         document.getElementById("username").focus();
  80.                         return false;
  81.                 }
  82.                 //验证登录名不多于8个字符
  83.                 /*var userreg = /^[A-Za-z0-9\u4e00-\u9fa5]{9,}$/;
  84.                 var flag = userreg.test(username);
  85.                 if(flag)
  86.                 {
  87.                         alert("您的登录名不能大于8个字符");
  88.                         document.getElementById("username").focus();
  89.                         return false;
  90.                 }*/
  91.        
  92.         }

  94. }
  95. </script>


  98. </html>
复制代码
太长了。没写完。
作者: 谢孔营    时间: 2013-5-22 17:24
好吧：楼主不懂继续问
<form action="/servlet/LoginServlet"  name="loginForm" method="Post" onsubmit="return check()">
姓名:<input type="text" name="txtName"/><br/>
密码:<input type="password" name="txtPwd"/><br/>
<input type="submit"  value="登录" />
这个是最常见的表单登录验证
当然验证前要用js对输入内容合法性的验证，这里不加缀余
当你点击登录后，就会根据action找到相应的servlet，这个过程有点复杂，简单说一下，就是
通过tomcat服务器的web.xml映射到Servlet。
找到servlet后，在servlet里获取登录时，输入的内容
可以通过String  name= request.getParameter("txtName");
String pwd = request.getParameter("txtPwd");
然后通过一步封装到一个MOdel类中，
将数据传递到数据层验证，验证通过就登录了。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2