A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 学习交流 › 技术交流 › Java技术交流 › 正文

[学习交流] 表单

© 季995 中级黑马   /  2015-9-24 17:41  /  333 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 季995 于 2015-9-24 17:41 编辑
  1. <title>表单验证</title>

  3. </head>

  5. <body>
  6. <script type="text/javascript">
  7. //校验用户名方法
  8. /*function checkUser(){
  9.         
  10.         //1.获取文本框节点对象
  11.         var userNode=document.getElementsByName("user")[0];
  12.         var username=userNode.value;
  13.         var flag=false;
  14.         //alert(userNode.value);
  15.         //获取提示信息存储的节点对象
  16.         var spanNode=document.getElementById("userSpan");
  17.         //对用户名用正则表达式进行判断。要求四位字母
  18.         //创建一个正则表达式
  19.         var regex=new RegExp("^[a-zA-Z]{4}[        DISCUZ_CODE_0        ]quot;);
  20.         //if(username=="abc")
  21.         if(regex.test(username))
  22.         {
  23.                 spanNode.innerHTML="用户名输入正确！".fontcolor('#ff00cc');
  24.                 flag=true;
  25.                
  26.                 }
  27.         else{spanNode.innerHTML="用户名输入错确！".fontcolor('red');}
  28.         
  29.         return flag;
  30.         
  31.         }
  32.         //校验密码
  33.         function checkPsw(){
  34.                
  35.                 var pswNode=document.getElementsByName("psw")[0];
  36.                 var pswVal=pswNode.value;
  37.                 var spanNode=document.getElementById("pswSpan");
  38.                 var flag=false;
  39.                 var regex=new RegExp("^\\d{4}[        DISCUZ_CODE_0        ]quot;);
  40.                 if(regex.test(pswVal)){
  41.                         
  42.                         spanNode.innerHTML="用户密码输入正确".fontcolor('#ff00cc');
  43.                         flag=true;
  44.                         
  45.                         }
  46.                         else{spanNode.innerHTML="用户密码输入错确".fontcolor('red');}
  47.                         
  48.                         return flag;
  49.         
  50.                
  51.                 }
  52.         //校验表单
  53.         function checkForm(){
  54.                 if(checkUser())
  55.                 {
  56.                 return true;
  57.                 }
  58.                
  59.                 return false;
  60.         
  61.                 }*/
  62.                
  63. //提高代码复用性

  65. //校验文本框
  66. function check(name,regex,spanid,okinfo,errinfo){
  67.         var val=document.getElementsByName(name)[0].value;
  68.         var spanNode=document.getElementById(spanid);
  69.         var flag=false;
  70.         if(regex.test(val)){
  71.                
  72.                 spanNode.innerHTML=okinfo.fontcolor('#ff00cc');
  73.                 flag=true;
  74.                 }
  75.         else{
  76.                 spanNode.innerHTML=errinfo.fontcolor('red');
  77.                 }
  78.         return flag;
  79.         
  80.         
  81.         }        
  82. //校验用户名
  83. function checkUser(){
  84.         var regex=new RegExp("^[a-zA-Z]{4}[        DISCUZ_CODE_0        ]quot;);
  85.         return check("user",regex,"userSpan","用户名正确","用户名输错误");
  86.         }        
  87.         
  88. //校验密码
  89. function checkPsw(){
  90.         var regex=new RegExp("^\\d{4}[        DISCUZ_CODE_0        ]quot;);
  91.         return check("psw",regex,"pswSpan","用户密码正确","用户密码错误");
  92.         
  93.         
  94.         
  95.         }
  96.         
  97.         
  98. //确认密码
  99. function checkRepsw(){
  100.         var flag=false;
  101.         var pswVal=document.getElementsByName("psw")[0].value;
  102.         var repswVal=document.getElementsByName("repsw")[0].value;
  103.         var span=document.getElementById("repswSpan");
  104.          if(pswVal==repswVal)
  105.          {
  106.                  span.innerHTML="密码一致".fontcolor('#ff00cc');
  107.                  return flag=true;
  108.                  }
  109.         else{
  110.                 span.innerHTML="密码不一致".fontcolor('red');
  111.         }
  112.         return flag;
  113.         }

  115. //校验邮箱
  116. function checkMail(){
  117.         var regex=new RegExp("^\\w+@\\w+(\\.\\w+)+[        DISCUZ_CODE_0        ]quot;);
  118.         return check("mail",regex,"mailSpan","格式正确","格式错误");
  119.         }        
  120.         
  121. //校验性别        
  122. function checkSex(){
  123.         var flag=false;
  124.         var radioNodes=document.getElementsByName("sex");
  125.         for(var x=0;x<radioNodes.length;x++)
  126.         {
  127.                 if(radioNodes[x].checked)
  128.                 {
  129.                   flag=true;
  130.                         break;
  131.                 }
  132.         }
  133.                 var spanNode=document.getElementById("sexSpan");
  134.                 if(!flag)
  135.                 {
  136.            spanNode.innerHTML="请选择性别".fontcolor('red');
  137.            }
  138.                 return flag;
  139.         }
  140.         
  141. //校验国家
  142. function checkCountry()
  143. {  　var flag=true;
  144.   //1.获取下拉菜单对象
  145.         var selNode=document.getElementsByName("country")[0];
  146.         //获取所有option对象集合
  147.         var optNodes=selNode.options;
  148.         //for(var i=0;i<optNodes.length;i++){
  149.                 //alert(optNodes[i].innerHTML);
  150.                 //}
  151.         //获取下啦菜单中的选择国家
  152.         //aler(optNOdes[sleNode.selectedIndex].innerHTML);
  153.         
  154.         //获取选择下拉菜单项的值只要不是none就可以提交，是none给提示。
  155.         var val=optNodes[selNode.selectedIndex].value;        
  156.         var span=document.getElementById("selectSpan");
  157.         if(val=="none")
  158.         {
  159.                 span.innerHTML="请选择国家".fontcolor("red");
  160.                 flag=false;
  161.         }
  162.         return flag;
  163. }        
  164.         
  165.                
  166. //提交前再次验证
  167. function checkForm(){
  168.         if(checkUser() && checkPsw()&& checkRepsw()&& checkMail() && checkSex() && checkCountry())

  170.         {
  171.                 return true;
  172.         }
  173.         return false;
  174.         
  175.         
  176.         }
  177.         



  181.                
  182. //自定义按钮的校验
  183. function myCheckFrom(){
  184.         //获取表单对象
  185.         var formNode=document.getElementById("formid");
  186.         if(checkUser())
  187.         {
  188.                 //提交调用方法
  189.         formNode.submit();
  190.         }
  191.         }

  193. </script>
  194. <form  id="formid" onsubmit="return checkForm()">
  195. 用户名称：<input type="text" name="user" onblur="checkUser()" />
  196. <span id="userSpan"></span><br />
  197. 用户密码：<input type="password" name="psw" onblur="checkPsw()" />
  198. <span id="pswSpan"></span><br />
  199. 确认密码：<input type="password" name="repsw" onblur="checkRepsw()" />
  200. <span id="repswSpan"></span><br />
  201. 输入邮箱：<input type="text" name="mail" onblur="checkMail()" />
  202. <span id="mailSpan"></span><br />

  204. 选择性别：<input type="radio" name="sex" value="nan" />男
  205. <input type="radio" name="sex" value="nv"  />女
  206. <span id="sexSpan"></span><br/>
  207. 选择国家：<select name="country" >
  208. <option value="none">--选择国家--</option>
  209. <option value="cn">中国</option>
  210. <option value="usa">美国</option>
  211. <option value="en">英国</option>
  212. </select>
  213. <span id="selectSpan"></span><br />
  214. <input type="submit" value="提交数据" />
  215. <hr />
  216. <input type="button"  value="自定义提交" onclick="myCheckFrom()"/>

  218. </form>
  219. </body>
复制代码

css.zip

529 Bytes, 下载次数: 4

css样式

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马