JS表单验证提示效果

一个流行且实用的JS表单验证提示，演示了怎么自定义错误信息的显示方式，同时通过写FormValid.showError类方法来实现错误显示方式自定义： errMsg 是一个错误消息的数组，这样方便自定义,errName是对应错误信息元件名数组，这样可以非富自定义显示方式，FormValid.allName记录了所有有验证规则的字段名数级，在自定义中可以使用到

代码如下：

<title>自动切换Tab选项卡</title>
<script type="text/javascript">
function randint(m,n)//产生m-n之间的随机整数
{
 return Math.random()*(n-m)+m;
}
function IfNull(a,dv)
{
 return typeof(a) =="undefined"?dv:a;
}

var TabPaneConfig = {
    idPrefix: "tab-panel-object-",
    idCounter: 0,
    getId: function(){ return this.idPrefix+this.idCounter++;},
    tabHeadId: "tabHead",
    tabHeadClass: "tab-head tab-border",
    tabBodyId: "tabBody",
    tabBodyClass: "tab-border"
}

function TabPane(id,changeTabInterval,isAutoChangeTab){
    this.id = id;
    this.height = "100%";
    this.width = "100%";
   
    this.tabPages = 0;
    this.head = null;
    this.body = null; 
   
    this.changeTabInterval=IfNull(changeTabInterval,10);
    this.isAutoChangeTab=IfNull(isAutoChangeTab,true); 
    this.changeTabTimerId = null;     
}

TabPane.prototype.init = function(){   
    var r = document.getElementById(this.id);
    if(!r.style.overflow)    r.style.overflow = "auto";
    r.className = "tab";
   
    //create head
    var div = document.createElement("div");
    div.id = TabPaneConfig.tabHeadId;
    div.className = TabPaneConfig.tabHeadClass;
   
    r.appendChild(div);
    this.head = div;
   
    var ul = document.createElement("ul");
    div.appendChild(ul);
   
    //create body
    div = document.createElement("div");
    div.id = TabPaneConfig.tabBodyId;
    div.className = TabPaneConfig.tabBodyClass;
   
    r.appendChild(div);   
    this.body = div;
   
    if(this.isAutoChangeTab)
    {
     var tabPane = this;
     this.changeTabTimerId = setInterval(function(){onChangeTabTimer(tabPane);},this.changeTabInterval*1000);   
    } 
}

TabPane.prototype.stopChangeTabTimer = function ()
{
 if(this.isAutoChangeTab)
  {
    clearInterval(this.changeTabTimerId);
  }
}

TabPane.prototype.addTabPage = function(obj)
{
    if(!document.getElementById(obj.panel)) return;
    if(!this.tabPages)  this.init();   
       
    this.head.firstChild.appendChild(this.createTabTitle(obj));
    this.body.appendChild(document.getElementById(obj.panel));   
    this.tabPages++;
}

TabPane.prototype.createTabTitle = function(obj){
    var li = document.createElement("li");
    li.id = TabPaneConfig.getId();   
    li.data = obj.panel;
    var tabPane = this;
    li.οnclick=function(){tabOnClick(tabPane,li)};
    li.style.width = obj.width;
   
    if(this.tabPages)
    {
        li.className="";
        document.getElementById(obj.panel).style.display="none";   
    }
    else
    {
        li.className="hover";
        document.getElementById(obj.panel).style.display="block";   
    }
       
    var textNode = document.createTextNode(obj.title);
    li.appendChild(textNode);   
    return li;
}

//得到所有Tab页的Li元素
TabPane.prototype.getLiArr = function()
{
 return this.head.firstChild.children;
}

TabPane.prototype.getAcitveLi = function()
{
 var liArr = this.getLiArr();
  for(var i=0; i<liArr.length; i++)
  {
   if(liArr[i].className=="hover")
   {
    return liArr[i];
   }
  } 
}

//切换到指定的li对应的Tab页
TabPane.prototype.changeToTab = function (li)
{
    var liArr = this.getLiArr();
    for(var i=0; i<liArr.length; i++)
    {
        liArr[i].className="";
        document.getElementById(liArr[i].data).style.display="none";
    }
    li.className="hover";   
    document.getElementById(li.data).style.display="block"; 
}

//得到v在数组arr中的序号
function indexOf(arr,v)
{
 for(var i = arr.length; i-- && arr[i] !== v;);
 return i;  
}

function onChangeTabTimer(tabPane)
{
var liArr = tabPane.getLiArr();
  var activeLi = tabPane.getAcitveLi();
  var i = indexOf(liArr,activeLi);
  var nexti = (i+1+liArr.length)%liArr.length;
  var nextLi = liArr[nexti];
  tabPane.changeToTab(nextLi);
}

function tabOnClick(tabPane,li)
{   
   tabPane.stopChangeTabTimer();
  tabPane.changeToTab(li);
}

</script>
<style>
.tab {
    font-family:    Verdana, Helvetica, Arial;
    font-size:        12px;
    position:    relative;
    width:        100%;
}
.tab-border {border:1px solid;border-color:    rgb(120,172,255);}
.tab-head {
    background-color:rgb(234,242,255);;
    border:0px;
    height:23px;
    line-height:20px;
    position:relative;   
}
.tab-head ul{
    border:0px;
    height:23px;
    list-style:none;     
    margin:0px;     
    text-align:center;
    padding:0;
    position:absolute;
   
}
.tab-head li{   
    border:    1px solid;
    border-color:    rgb(120,172,255);
    border-left:    0;
    border-bottom:    0;
    border-top:        0;
    cursor:pointer;
    color:#416AA3;   
    float:left;
    display:block;
    height:22px;!important;height:20px;
    line-height:20px;
    padding:        2px 6px 0px 6px;
    margin-top:    2px;
    margin-right:    -1px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;

}
.tab-head li.hover{
    border:            1px solid rgb(120,172,255);
    border-bottom:    0;
    padding:        0px 6px 3px 6px;
    margin:            0px 1px 0px 0px;
    background:        white;
    font-size:            13px;
    font-weight:    bold;
    color:                rgb(0,66,174);
    overflow:visible;   
}
</style>
<div id="rptopmain_right_middle_right">
   <!--公告、面板-->
     <div id="divForumBoard"></div>      
     <div id="divForumCast" style="padding:8px;height:200px">       
<DIV class=rp_2equalcol><A href="#" target=_blank>黑客零起点教程 CHM</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>什么样的项目经历会让面试官眼前一亮</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>编程学习中的一些错误认识</A></DIV>
     </div>      
   <div id="divForumPanel" style="padding:8px;height:210px">        
<DIV class=rp_2equalcol><A href="#" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>学ACM算法题有用吗？</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>黑客零起点教程 CHM</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>B实现主窗体控制副窗口的显示与隐藏</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV>    
   </div>       
     <script>
         var tp = new TabPane("divForumBoard",randint(3,10));
         tp.addTabPage({title:"公告" ,width:50 ,panel:"divForumCast"});
         tp.addTabPage({title:"面板" ,width:50 ,panel:"divForumPanel"});    
     </script>        
     </div> 
    </div>