首頁新隨筆新文章聯系聚合

posts - 23,comments - 260,trackbacks - 0

2007年4月

>

日

一

二

三

四

五

六

25

26

27

28

29

30

31

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

1

2

3

4

5

常用鏈接

留言簿(5)

隨筆分類

隨筆檔案

好友的BLOG

crespo
同學，朋友，同事。。。匪夷所思
愛友
愛友的博客
神行梅
shenxingmei是個啥意思呢？
章章
!@#$%^&*()_+|

搜索

積分與排名

積分 - 67804
排名 - 800

閱讀排行榜

評論排行榜

javascript學習實踐－－新手上路－－驗證表單

這幾天學習javascript，就只在看書，都沒怎么實踐，
今天工作的時候要檢驗表單數據，屬性Ｎ多，以前做的時候是對每個屬性都寫四五句話來判斷，類似
function checkData(){
   if(document.forms[0].username==""){
      alert("請輸入用戶名");
      document.forms[0].username.focus();
      return false;
   }
   return true;
}
關于這種驗證的實用性暫且不談，現在一般的驗證早已不用這個了。
只是為了在工作中偷偷懶，寫了個方便點的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>驗證</title>
<script type="text/javascript">
var CheckUtil = new Object();
var checkutil = CheckUtil;
CheckUtil.status = true;//狀態，用來標志是否有不合格驗證
CheckUtil.checks = new Array();//用來存儲需要驗證的對象參數
CheckUtil.definedchecks = new Array();//用來存儲自定義驗證
CheckUtil.errors = new Array();//用來存儲輸出錯誤信息
CheckUtil.firstErrObj = null;//用來存儲第一個出錯對象，設置焦點
//////////////////////各種驗證類型/////////////////////////////
CheckUtil.REQUIRED = /\S/;        //非空
CheckUtil.INT = /^-?\d+$/;        //整數
CheckUtil.FLOAT = /^(-?\d+)(\.\d+)?$/;        //浮點數
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}$/;        //手機
CheckUtil.NUM = /^\d+$/;    //數字
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;
}
/**
*添加驗證對象及參數
*@param obj 需驗證表單對象
*@param checktype 需驗證類型
*@param errmessage 驗證失敗時提示信息
*/
CheckUtil.addCheck = function(obj,checktype,errmessage){
    var check_obj = new checkObj(obj,checktype,errmessage);
    CheckUtil.checks.push(check_obj);
}
/**
*添加自定義驗證
*@param expression 需驗證表達式，為真時返回錯誤信息
*@param errmessage 驗證失敗時提示信息
*/
CheckUtil.addDefinedCheck = function(expression,errmessage){
    var check_obj = new definedcheckObj(expression,errmessage);
    CheckUtil.definedchecks.push(check_obj);
}
/**
*驗證對象
*/
function checkObj(obj,checktype,errmessage){
    this.obj = obj;
    this.value = obj.value;
    this.checktype = checktype;
    this.errmessage = errmessage;
}
/**
*自定義驗證對象
*/
function definedcheckObj(expression,errmessage){
    this.expression = expression;
    this.errmessage = errmessage;
}
/**
*執行驗證并提示信息，并返回驗證狀態
*/
CheckUtil.execute = function(){    
    checkChecks();
    checkDefinedChecks();
    showError();
    return CheckUtil.status;
}
/**
*檢驗對象
*/
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);
                    }
               }
         }
    }
}
/**
*檢驗自定義驗證
*/
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);
          }
    }
}
/**
*顯示錯誤信息
*/
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,"驗證碼須為數字");
    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.aygfsteel.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>確　認</label>
<input name="password2" type="password" size="20" /><br/>
<label>驗證碼</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>

其實也可以方便的根據需要更改提示的方式。

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

FeedBack:

# re: javascript學習實踐－－新手上路－－驗證表單

2007-04-24 20:42 | 睿不可當

不錯啊！我可是都仔細看了一遍
辛苦拉，看你寫東西的時間就知道不容易啊
呵呵！回復更多評論

# re: javascript學習實踐－－新手上路－－驗證表單

2007-04-25 01:01 | 小祝

多謝支持，呵呵～回復更多評論

新用戶注冊刷新評論列表


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




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: 用ActiveXObject控件替換word書簽，將內容導出到word后打印 xml+xsl+javascript取值及修改數據 javascript學習筆記(八)－－錯誤處理 javascript學習筆記(七)－－DOM基礎 javascript學習實踐－－新手上路－－驗證表單 javascript學習筆記(六)－－資料 javascript學習筆記(五)－－事件 javascript學習筆記(四)－－檢測瀏覽器和操作系統 javascript學習筆記(三)－－正則表達式 javascript學習筆記(二)－－繼承