在线观看亚洲天天一三视,亚洲AV永久无码精品一区二区国产 ,亚洲产国偷V产偷V自拍色戒

javascript學(xué)習(xí)實(shí)踐－－新手上路－－驗(yàn)證表單

這幾天學(xué)習(xí)javascript，就只在看書，都沒怎么實(shí)踐，
今天工作的時(shí)候要檢驗(yàn)表單數(shù)據(jù)，屬性Ｎ多，以前做的時(shí)候是對每個(gè)屬性都寫四五句話來判斷，類似
function checkData(){
   if(document.forms[0].username==""){
      alert("請輸入用戶名");
      document.forms[0].username.focus();
      return false;
   }
   return true;
}
關(guān)于這種驗(yàn)證的實(shí)用性暫且不談，現(xiàn)在一般的驗(yàn)證早已不用這個(gè)了。
只是為了在工作中偷偷懶，寫了個(gè)方便點(diǎn)的CheckUtil，如下

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>驗(yàn)證</title>
<script type="text/javascript">
var CheckUtil = new Object();
var checkutil = CheckUtil;
CheckUtil.status = true;//狀態(tài)，用來標(biāo)志是否有不合格驗(yàn)證
CheckUtil.checks = new Array();//用來存儲(chǔ)需要驗(yàn)證的對象參數(shù)
CheckUtil.definedchecks = new Array();//用來存儲(chǔ)自定義驗(yàn)證
CheckUtil.errors = new Array();//用來存儲(chǔ)輸出錯(cuò)誤信息
CheckUtil.firstErrObj = null;//用來存儲(chǔ)第一個(gè)出錯(cuò)對象，設(shè)置焦點(diǎn)
//////////////////////各種驗(yàn)證類型/////////////////////////////
CheckUtil.REQUIRED = /\S/;        //非空
CheckUtil.INT = /^-?\d+$/;        //整數(shù)
CheckUtil.FLOAT = /^(-?\d+)(\.\d+)?$/;        //浮點(diǎn)數(shù)
CheckUtil.USERNAME = /^[a-zA-Z]{1}(\w){4,19}$/;        //用戶名
CheckUtil.EMAIL = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;    //電子郵箱
CheckUtil.TEL = /^(($\d{3}$)(\d{3}\-))?($0\d{2,3}$0\d{2,3}-)?[1-9]\d{6,7}$/;    //電話號碼
CheckUtil.MOBILEPHONE = /^(($\d{3}$)(\d{3}\-))?13\d{9}$/;        //手機(jī)
CheckUtil.NUM = /^\d+$/;    //數(shù)字
CheckUtil.CARDID = /^\d{15}(\d{2}[A-Za-z0-9])?$/;        //身份證號
CheckUtil.POSTCODE = /^[1-9]\d{5}$/;        //郵編
CheckUtil.DATE1 = /^(?:19\d{2}|20\d{2})-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12][0-9]|3[01])$/        //日期，形如yyyy-mm-dd
///////////////////////////////////////////////////////////////////////
/**
*初始化
*/
CheckUtil.init = function(){
    CheckUtil.status = true;
    CheckUtil.checks = new Array();
    CheckUtil.definedchecks = new Array();
    CheckUtil.errors = new Array();
    CheckUtil.firstErrObj = null;
}
/**
*添加驗(yàn)證對象及參數(shù)
*@param obj 需驗(yàn)證表單對象
*@param checktype 需驗(yàn)證類型
*@param errmessage 驗(yàn)證失敗時(shí)提示信息
*/
CheckUtil.addCheck = function(obj,checktype,errmessage){
    var check_obj = new checkObj(obj,checktype,errmessage);
    CheckUtil.checks.push(check_obj);
}
/**
*添加自定義驗(yàn)證
*@param expression 需驗(yàn)證表達(dá)式，為真時(shí)返回錯(cuò)誤信息
*@param errmessage 驗(yàn)證失敗時(shí)提示信息
*/
CheckUtil.addDefinedCheck = function(expression,errmessage){
    var check_obj = new definedcheckObj(expression,errmessage);
    CheckUtil.definedchecks.push(check_obj);
}
/**
*驗(yàn)證對象
*/
function checkObj(obj,checktype,errmessage){
    this.obj = obj;
    this.value = obj.value;
    this.checktype = checktype;
    this.errmessage = errmessage;
}
/**
*自定義驗(yàn)證對象
*/
function definedcheckObj(expression,errmessage){
    this.expression = expression;
    this.errmessage = errmessage;
}
/**
*執(zhí)行驗(yàn)證并提示信息，并返回驗(yàn)證狀態(tài)
*/
CheckUtil.execute = function(){    
    checkChecks();
    checkDefinedChecks();
    showError();
    return CheckUtil.status;
}
/**
*檢驗(yàn)對象
*/
function checkChecks(){
     for(var i=0;i<checkutil.checks.length;i++){
          var check_obj = CheckUtil.checks[i];
          if(check_obj.checktype==CheckUtil.REQUIRED){//判斷是否是必填
                 if(!check_obj.checktype.test(check_obj.value)){
                     CheckUtil.status = false;
                     if(!CheckUtil.firstErrObj){
                         CheckUtil.firstErrObj = check_obj.obj;
                     }
                     CheckUtil.errors.push(check_obj.errmessage);
                 }
          }else{//不是必填的話，看有沒有填入值，填了就檢查，沒填也是可行的
               if(CheckUtil.REQUIRED.test(check_obj.value)){
                    if(!check_obj.checktype.test(check_obj.value)){
                          CheckUtil.status = false;
                          if(!CheckUtil.firstErrObj){
                              CheckUtil.firstErrObj = check_obj.obj;
                          }
                          CheckUtil.errors.push(check_obj.errmessage);
                    }
               }
         }
    }
}
/**
*檢驗(yàn)自定義驗(yàn)證
*/
function checkDefinedChecks(){
    for(var i=0;i<checkutil.definedchecks.length;i++){
          var check_obj = CheckUtil.definedchecks[i];
          if(check_obj.expression){
                  CheckUtil.errors.push(check_obj.errmessage);
          }
    }
}
/**
*顯示錯(cuò)誤信息
*/
function showError(){
    if(!CheckUtil.status){
        var show = "";
        for(var i=0;i<checkutil.errors.length;i++){
            show +=(i+1)+". "+CheckUtil.errors[i]+"\n";
        }
        alert(show);    
        CheckUtil.firstErrObj.focus();
        CheckUtil.firstErrObj.select();
    }
}
function checkData(){
    CheckUtil.init();
    CheckUtil.addCheck(document.forms[0].username,CheckUtil.REQUIRED,"請輸入用戶名");
    CheckUtil.addCheck(document.forms[0].username,CheckUtil.USERNAME,"用戶名須由字母開頭,及4-19位單詞字符組成");
    CheckUtil.addCheck(document.forms[0].password,CheckUtil.REQUIRED,"請輸入密碼");
    CheckUtil.addCheck(document.forms[0].checkcode,CheckUtil.NUM,"驗(yàn)證碼須為數(shù)字");
    CheckUtil.addCheck(document.forms[0].logindate,CheckUtil.DATE1,"請輸入正確的日期格式，形如yyyy-mm-dd");
    CheckUtil.addDefinedCheck(document.forms[0].password!=document.forms[0].password2,"兩次輸入的密碼不相同");
    return CheckUtil.execute();
}
</script>
</head>
<body>
<form name="form1" action="www.tkk7.com/ilovezmh" method="post" onsubmit="return checkData();">
<label>用戶名</label>
<input name="username" type="text" size="20" /><br/>
<label>密　碼</label>
<input name="password" type="password" size="20" /><br/>
<label>確　認(rèn)</label>
<input name="password2" type="password" size="20" /><br/>
<label>驗(yàn)證碼</label>
<input name="checkcode" type="text" size="20" /><br/>
<label>日　期</label>
<input name="logindate" type="text" size="20" /><br/>
<button name="sub" type="submit"> 提　交　</button>
</form>
</body>
</html>

其實(shí)也可以方便的根據(jù)需要更改提示的方式。

posted on 2007-04-18 23:36 小祝閱讀(737) 評論(2) 編輯收藏所屬分類: Javascript

常用鏈接

留言簿(5)

隨筆分類

隨筆檔案

好友的BLOG

搜索

積分與排名

最新評論

閱讀排行榜

評論排行榜


只有注冊用戶登錄后才能發(fā)表評論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關(guān)文章: 用ActiveXObject控件替換word書簽，將內(nèi)容導(dǎo)出到word后打印 xml+xsl+javascript取值及修改數(shù)據(jù) javascript學(xué)習(xí)筆記(八)－－錯(cuò)誤處理 javascript學(xué)習(xí)筆記(七)－－DOM基礎(chǔ) javascript學(xué)習(xí)實(shí)踐－－新手上路－－驗(yàn)證表單 javascript學(xué)習(xí)筆記(六)－－資料 javascript學(xué)習(xí)筆記(五)－－事件 javascript學(xué)習(xí)筆記(四)－－檢測瀏覽器和操作系統(tǒng) javascript學(xué)習(xí)筆記(三)－－正則表達(dá)式 javascript學(xué)習(xí)筆記(二)－－繼承