asp.net(ajax)表單驗證 函數包

asp.net(ajax)表單驗證 函數包

/**********************************************************************************
*
* 功能說明:js表單驗證函式庫
* 作者: 劉功勳;
* 版本:v0.1(javascript);時間:2006-7-27
* 注意:檔案為js檔案,使用時,<script language="javascript" src="*.js"></script>
* *******************************************************************************/

/********************************************************************************
* 函數名稱：resultremain
* 功能說明：根據傳遞值，改變表單提示狀態
* 參     數：id:表單span id號；str:提示文字；cssclassname:改變提示顏色的css style class名稱

*********************************************************************************/
function resultremain(id,stype,str,cssclassname)
{  
       switch (stype) {
             //預設           
       case "normal" :
           {
               eval("span_"+id).classname=cssclassname;     
            break;
        }
          //正確
       case "right" :
           {         
            eval("span_"+id).innerhtml=str;
            eval("span_"+id).classname=cssclassname;           
            break;
        }
       //錯誤
       case "error":
         {                                 
          eval("span_"+id).classname=cssclassname;
          eval("error_"+id).innerhtml=str;                                
          break;
             }
       //獲得焦點
       case "focus":      
       {
         eval("span_"+id).innerhtml=str;
         eval("span_"+id).classname=cssclassname;         
       }
       default :
        break;
      }
}

/********************************************************************************
* 函數名稱：onfocusform
* 功能說明：密碼輸入框獲得焦點時顯示提示狀態
* 參     數：o:表單對象
* 調用方式：表單控制項名稱.attributes["onfocus"] = "return onfocuspwd(this);";   //(asp.net)
*********************************************************************************/
function onfocusform(o,str)
{
     if(o){     
         resultremain(o.id,"focus",str,"formonfocus");
     
     }
}

/********************************************************************************
* 函數名稱：oncheckpwd
* 功能說明：當表單失去焦點時，觸發相應的密碼檢測
* 參     數：o:表單對象
* 調用方式：表單名稱.attributes["onfocus"] = "return onfocuspwd(this);";   //(asp.net)
*********************************************************************************/
function oncheckpwd(o){     
     var p = o.value;    
     if(p){
         //測試密碼長度,包括漢字密碼
      var len = 0;
      var ary = escape(p).match(/(%u[0123456789abcdef]{4})+/g);
      if(ary){
       len = unescape(ary.join("")).length * 2;
       p = unescape(escape(str).replace(/(%u[0123456789abcdef]{4})+/g,""));
       len += p.length;
      }else{
       len = p.length;
      }    
      if(len < 6 || len > 20){
           resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 密碼有誤</span> ","formerr");
        return false;            
            
         }else{
           resultremain(o.id,"right","填寫正確 ","formnormal");   
           return true;              
        }
     }else{
         resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 密碼不可為空</span> ","formerr");
         return false;      
     }
};

/**********************************************************************************
* 函數名稱：strlen
* 功能說明：檢測字串長度
* 參     數：o:表單對象;len:字串長度
* 調用方式：表單名稱.attributes["onblur"] = "return strlen(this,30);"; //(asp.net)
***********************************************************************************/

function strlen(o,len)
{
     var p = o.value;    
     if(p)
     {
         var l=p.length;
         if(l>len)
             {
              resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 字元超過長度</span> ","formerr");
              return false;  
            }
         else
              resultremain(o.id,"right","填寫正確 ","formnormal");
              return true;
     }
     else
     {
         resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 資料不可為空</span> ","formerr");
         return false;  
     }
}

/**********************************************************************************
* 函數名稱：oncheckpostcode(o)
* 功能說明：檢測郵編是否合法
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return oncheckpostcode(this);"; //(asp.net)
***********************************************************************************/
function oncheckpostcode(o){
     var str = o.value;
     if(str){
         var pattern = /^\d{6}$/;
   if(!pattern.test(str))
         {
             resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 郵編輸入不合法</span> ","formerr");           
             return false;
         }else{
             resultremain(o.id,"right","填寫正確 ","formnormal");
             return true;
         }
     }else{
             resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 郵編不可為空</span> ","formerr");
            return false;  
         }
}

/**********************************************************************************
* 函數名稱：onchecktel(o)
* 功能說明：檢測電話號碼是否合法或傳真
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return oncheckpostcode(this);"; //(asp.net)
***********************************************************************************/
function onchecktel(o){
     var str = o.value;
     if(str){
         var pattern = /^((\d{3,4}-?\d{7,8})|(\d{7,8}))$/;
   if(!pattern.test(str))
         {
               resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 號碼格式不合法</span> ","formerr");            
             return false;
         }else{
             resultremain(o.id,"right","填寫正確 ","formnormal");
             return true;
         }
     }else{
               resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 號碼不可為空</span> ","formerr");
               return false;
         }
}

/**********************************************************************************
* 函數名稱：oncheckmobile(o)
* 功能說明：檢測手機號碼是否合法
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return oncheckmobile(this);"; //(asp.net)
***********************************************************************************/
function oncheckmobile(o){
     var str = o.value;
     if(str){
         var pattern = /^(0?13\d{9})$/;
   if(!pattern.test(str))
         {
             resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 手機號碼輸入不合法</span> ","formerr");          
             return false;
         }else{
           resultremain(o.id,"right","填寫正確 ","formnormal");
           return true;
         }
     }else{
              resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 手機號碼不可為空</span> ","formerr");
              return false;
         }
}

/**********************************************************************************
* 函數名稱：oncheckemail(o)
* 功能說明：檢測e-mail是否合法
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return oncheckemail(this);"; //(asp.net)
***********************************************************************************/
function oncheckemail(o){
     var em = o.value;
     if(em){
         var pattern = /^(\w|_|\.)+@((\w|_|\-)+\.)+(\w){2,3}$/;
      if(!pattern.test(em))
      {
           resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> e-mail輸入不合法</span> ","formerr");        
          return false;   
        }   
      else{
             resultremain(o.id,"right","填寫正確 ","formnormal");
             return true;
         }
}else{
       resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> e-mail不可為空</span> ","formerr");  
       return false;    
}
}

/**********************************************************************************
* 函數名稱：ipcheck(o)
* 功能說明：檢測ip地址是否合法
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return ipcheck(this);"; //(asp.net)
***********************************************************************************/
function ipcheck(o){    
     var ipstr=o.value;
     if(ipstr){
          var reg = /^((\d{1,3})(\.\d{1,3}){3})$/;
          if(reg.test(ipstr))
          {
             var ary = ipstr.split(‘.‘);
             for(key in ary)
       {
                 if(parseint(ary[key]) > 255)
        {
             resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" />ip輸入不合法</span> ","formerr");  
            return false;
        }
             }
              resultremain(o.id,"right","填寫正確 ","formnormal");
               return true;
          }
          else
          {
            resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" />ip輸入不合法</span> ","formerr");
             return false;  
          }
     }
     else
     {
         resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> ip不可為空</span> ","formerr");   
          return false;
     }
}

/**********************************************************************************
* 函數名稱：checknum(o)
* 功能說明：檢測是否為純數字
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return checknum(this);"; //(asp.net)
***********************************************************************************/
function checknum(o)
{
     var str=o.value;
     if(str)
     {
          var reg =/\d/;
           if(!reg.test(str))
           {
              resultremain(o.id,"right","填寫正確 ","formnormal");
               return true;
           }
           else
           {
              resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 起始標識應為純數字!</span> ","formerr");
              return false;
           }         
     }
     else
     {
        resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 起始標識不可為空</span> ","formerr");
        return false;   
     }
}

/**********************************************************************************
* 函數名稱：checkchinese(o)
* 功能說明：檢測是否為中文字元
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return checkchinese(this);"; //(asp.net)
***********************************************************************************/
function checkchinese(o)
{
     var str=o.value;
     if(str)
     {
          var reg =/[\u0391-\uffe5]/gi;
           if(!reg.test(str))
           {
              resultremain(o.id,"right","填寫正確 ","formnormal");
              return true;
           }
           else
           {
              resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 含有中文字元!</span> ","formerr");
               return false;
           }         
     }
     else
     {
        resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 不可為空</span> ","formerr");  
       return false;  
     }
}

/**********************************************************************************
* 函數名稱： checkuid(o)
* 功能說明：檢測使用者名稱是否合法,暫沒做ajax檢測
* 參     數：o:表單對象;
* 調用方式：表單名稱.attributes["onblur"] = "return checkuid(this);"; //(asp.net)
***********************************************************************************/
function checkuid(o){
     var u = o.value;
     if(u){
         if(u.length < 4 || u.length > 20)
         {
             resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 使用者名稱長度需在4-20之間!</span> ","formerr");
             return false;
         }
     }else{
          resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 使用者名稱不可為空!</span> ","formerr");
         return false;
     }
     var pattern = /^([a-za-z0-9]|[\u4e00-\ufa2d])+$/;
     if(!pattern.test(u))
     {
          resultremain(o.id,"error","<span style=\"color:#ff0000;\"><img src=\"/skin/main/images/icon_note.gif\" align=\"absmiddle\" /> 使用者名稱包含非法字元!</span> ","formerr");
         return false;
     }
     else
     {
         resultremain(o.id,"right","填寫正確 ","formnormal");
         return true;
     }
    
//     if(u == o1.value && u != ""){
//         regstyle(o.id,"right","此使用者名稱可以使用");
//         return false;
//      }
//     var flag = loadxml(hostname + "/callpage/query.aspx?op=queryuid&s=" + o.value);
//     if(flag == ‘false‘){
//         regstyle(o.id,"right","此使用者名稱可以使用");
//         o1.value = u;
//     }else{
//         regstyle(o.id,"error","這個使用者名稱已被註冊");
//         return false;
//     }
}

 

表單提交時,驗證全部表單的例子:

function regform()
{

     var falsestr="";
     //檢測密碼
   if(!oncheckpwd(form1.tb_u_password))    
        falsestr +="false|";
   if(!oncheckpwd(form1.tb_u_password2))    
        falsestr +="false|";
   if(form1.tb_u_password.value !=form1.tb_u_password2.value)
        falsestr +="false|";
   if(!oncheckemail(form1.tb_email))    
        falsestr +="false|";
   if(!onchecktel(form1.tb_tel))    
        falsestr +="false|";
// if(!oncheckmobile(form1.tb_mobile))    
    //     falsestr +="false|";
   if(!checkuid(form1.tb_name))    
        falsestr +="false|";          

    //當falsestr中,包含false中,則返回false
   if(falsestr.length>=5)
   {
alert(‘表單中，有不符合規定的字元‘);   
        return false;  
    }
     else
         return true;