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

1.显示效果

2，html结构

 <div class="border_bg">
 <div id="upcCode" style="position:relative;">
     <h3 style="color:#337ab7; margin:0 0 15px;">Please enter verification code</h3>
     <form action="<?php echo JRoute::_('index.php?option=com_gnverification&view=gnverification&layout=edit'); ?>"  method="post" id="code" class="form-inline">
         <div class="form-group">
             <label>Code:</label>
             <input type="text" name="upcCd" id="upcCd" class="form-control">

         </div>
         <input type="submit"  onclick="javascript:upTo(event);" value="Submit" class="btn btn-default" >
     </form>
     <div id="tooltiper" class="tooltip bootom fade in" style=" display: none; left:38px; border-radius:4px; "></div>
 </div>
 </div>

3，JavaScript实现

 <script type="text/javascript">
     //本地判断输入的验证并给出错误提示
     function upTo(e){
         var upcCdNode =document.getElementById("upcCd");
         var code=document.getElementById("code");
         var upcCd =document.getElementById("upcCd").value;
         var tooltiper =document.getElementById('tooltiper');
         if(upcCd ==""){
             preventSubmit(e,true)
             showMsg(tooltiper,"Sorry! You did not enter the verification code.")
         }else if(!/^[0-9]*$/.test(upcCd)){
             preventSubmit(e,true)
             showMsg(tooltiper,"Verification code you entered with Char!")
         }else if(!/^[0-9]{12}$/.test(upcCd)){
             preventSubmit(e,true)
             showMsg(tooltiper,"The number you entered did not reach or greater than 12.")

         }

     }
     //阻止表单提交
     function preventSubmit(e,check){
         e=e||window.event;
         if(check){
             if(document.all){
                 e.returnValue=false;
             }else{
                 e.preventDefault();
             }
         }

     }
     //显示输入错误
     function showMsg(obj,msg){
         obj.innerHTML=msg;
         obj.style.display="block";
         setTimeout(function(){
             obj.innerHTML="";
             obj.style.display="none";
         },4000);
     }

 </script>