纯js编写验证信息提示正则匹配数字，字母，空值

1.显示效果

2，html结构

 1 <div class="border_bg">
 2 <div id="upcCode" style="position:relative;">
 3     <h3 style="color:#337ab7; margin:0 0 15px;">Please enter verification code</h3>
 4     <form action="<?php echo JRoute::_('index.php?option=com_gnverification&view=gnverification&layout=edit'); ?>"  method="post" id="code" class="form-inline">
 5         <div class="form-group">
 6             <label>Code:</label>
 7             <input type="text" name="upcCd" id="upcCd" class="form-control">
 8 
 9         </div>
10         <input type="submit"  onclick="javascript:upTo(event);" value="Submit" class="btn btn-default" >
11     </form>
12     <div id="tooltiper" class="tooltip bootom fade in" style=" display: none; left:38px; border-radius:4px; "></div>
13 </div>
14 </div>

 

3，JavaScript实现

 1 <script type="text/javascript">
 2     //本地判断输入的验证并给出错误提示
 3     function upTo(e){
 4         var upcCdNode =document.getElementById("upcCd");
 5         var code=document.getElementById("code");
 6         var upcCd =document.getElementById("upcCd").value;
 7         var tooltiper =document.getElementById('tooltiper');
 8         if(upcCd ==""){
 9             preventSubmit(e,true)
10             showMsg(tooltiper,"Sorry! You did not enter the verification code.")
11         }else if(!/^[0-9]*$/.test(upcCd)){
12             preventSubmit(e,true)
13             showMsg(tooltiper,"Verification code you entered with Char!")
14         }else if(!/^[0-9]{12}$/.test(upcCd)){
15             preventSubmit(e,true)
16             showMsg(tooltiper,"The number you entered did not reach or greater than 12.")
17 
18         }
19 
20     }
21     //阻止表单提交
22     function preventSubmit(e,check){
23         e=e||window.event;
24         if(check){
25             if(document.all){
26                 e.returnValue=false;
27             }else{
28                 e.preventDefault();
29             }
30         }
31 
32     }
33     //显示输入错误
34     function showMsg(obj,msg){
35         obj.innerHTML=msg;
36         obj.style.display="block";
37         setTimeout(function(){
38             obj.innerHTML="";
39             obj.style.display="none";
40         },4000);
41     }
42 
43 </script>

 

posted @ 2015-10-10 09:54  lokou  阅读(990)  评论(0)  编辑  收藏  举报