每日一得

          不求多得,只求一得 about java,hibernate,spring,design,database,Ror,ruby,快速開發
          最近關心的內容:SSH,seam,flex,敏捷,TDD
          本站的官方站點是:顛覆軟件

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            220 隨筆 :: 9 文章 :: 421 評論 :: 0 Trackbacks
          本程序最初是由wanghr100(灰豆寶寶.net)的checkForm基礎上進行修改的,增加了很多功能,如下:
          • 對非ie的支持
          • 增加了內置表達式和內置提示
          • 增加了顯示方式(彈出式和頁面顯示式)
          • 增加了顯示一條和顯示全部
          • 進行了封裝(CLASS_CHECK)
          • 支持外接函數或表達式(應用在密碼一致)
          • 簡化了調用方式,所有操作只需要<script language='javascript' src='checkform.js'>,然后在HTML里定義各標簽驗證格式
          • 對IE增加了對鍵盤輸入的限制(如:定義usage='int'時,輸入框只能輸入數字(非IE無效
          • 增加了對disabled的不驗證
          • 自定義報警方式(重寫showMessageEx方法)
          ?
          聲明:?對本程序可以任意復制傳播,但請保留聲明部分,對于內置的表達式有些沒有做到很嚴格,如果你有好的建議和意見,歡迎郵件和我聯系或者上我的博客留言?

          簡介:

          ??? 本程序只需要對需要驗證的標簽設置三個屬性:usage,exp,tip
          ?
          • usage???? :?內置格式或表達式或函數
          • exp????????:?正則表達式(注意如果指定了usage則忽略exp)
          • tip????????? :?出錯提示(如果是內置格式可以不要此屬性,有缺省提示)
          ?
          ??? 調用時只需要引用<script language='javascript' src='checkform.js'></script>,然后為每個標記增加以上3個屬性(不一定需要全部) ,注意本js的默認編碼是gb2312,如果你的.net程序是utf-8,可以把js另存為utf-8格式的,或者該webconfig里編碼為gb2312
          ?
          演示:
          下載:
          基本表達式演示代碼:
          <HTML>
          <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
          <HEAD>
          <SCRIPT?language=JavaScript?src="checkform.js"></script>
          <SCRIPT?language=JavaScript>
          function?test()
          {
          ????
          return?document.getElementById('password').value==document.getElementById('rpassword').value;
          }

          </SCRIPT>

          </HEAD>
          <BODY>基本表達式測試:?
          <FORM?name=form1?>
          ????test:
          <INPUT?name=test>不驗證<BR>
          ????姓名:
          <INPUT?name=user?Tip="姓名不能為空"?Exp=""?disabled=true>Disabled不驗證<BR>

          ????賬號:
          <INPUT?name=id?Tip="賬號不能為空"?Exp="[^?]+">不能為空<BR>
          ????IP:
          <INPUT?name=iP?usage="ip4">ip<BR>
          ????數字
          <INPUT?name="nn"?usage="int"?tip="error">num<br>
          ????
          <INPUT?type=submit?value=提交FORM1查詢內容>
          </form>
          <form?name=form2>
          ????數字
          <INPUT?name="nn"?usage="int">num<br>

          ????密碼:
          <INPUT?type=password?id="password"?name=password?Tip="密碼六位以上"?Exp="\S{6,}">六位以上<BR>
          ????重復密碼
          <INPUT?type=password?id="rpassword"?name=rpassword?usage="test()"?tip="重復密碼不一致!"?>重復密碼<BR>
          ????電話:
          <INPUT?name=number?Tip="電話號碼含有非法字符"?Exp="^\d+$"><BR>
          ????相片上傳:
          <INPUT?type=file?name=pic?Tip="相片應該為JPG,BMP格式的"?Exp="(.*)(\.jpg|\.bmp)$"><BR>
          ????出生日期:
          <INPUT?name=dt?Tip="日期格式2004-08-10"?Exp="^\d{4}\-\d{1,2}-\d{1,2}$">日期格式2004-08-10<BR>

          ????省份:?
          <SELECT?name=sel?Tip="請選擇所在省份"?Exp="^0$"><OPTION?value=""?selected>請選擇<OPTION?value=1>福建省<OPTION?value=2>湖北省</OPTION></SELECT>?<BR>
          ????選擇你喜歡的運動:
          <BR>游泳<INPUT?type=checkbox?name=c?Tip="請選擇2項或以上"?Exp="^0{2,}$"?disabled>?籃球<INPUT?type=checkbox?name=c>?足球<INPUT?type=checkbox?name=c>?排球<INPUT?type=checkbox?name=c>?<BR>

          ????你的學歷:?大學
          <INPUT?type=radio?name=r?Tip="請選擇一項學歷"?Exp="^0$">?中學<INPUT?type=radio?name=r>?小學<INPUT?type=radio?name=r>?<BR>
          ????個人介紹:?
          <TEXTAREA?name=txts?Tip="個人介紹不能為空,且不少于20字"?Exp="^[\s|\S]{20,}$"></TEXTAREA>20個字以上
          ????
          <INPUT?type=BUTTON?value=提交FORM2查詢內容?onclick="if(g_check.checkForm(this.form))alert();">
          </FORM>
          </BODY>
          </HTML>


          內置表達式演示代碼:
          <HTML>
          <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
          <HEAD>
          <SCRIPT?language=JavaScript?src="checkform.js"></script>
          </HEAD>
          <BODY>內置表達式測試:?
          <FORM?name=form1?>

          ????賬號:
          <INPUT?name=id?usage="notempty">不能為空<BR>
          ????整數:
          <INPUT?usage="int"?>46<BR>

          ????正整數:
          <INPUT?usage="int+"?>13試試能不能輸入非數字<BR>
          ????負整數:
          <INPUT?usage="int-"?>-45<BR>
          ????浮點數:
          <INPUT?usage="float"?>56.4<BR>
          ????正浮點數:
          <INPUT?usage="float+"?>1.0<BR>
          ????負浮點數:
          <INPUT?usage="float-"?>-1.0<BR>

          ????數字:
          <INPUT?usage="num"?>345<BR>
          ????正數:
          <INPUT?usage="num+"?>+1<BR>
          ????負數:
          <INPUT?usage="num-"?>-1.0<BR>????
          ????郵箱:
          <INPUT??usage="email">ttyp@21cn.com<BR>

          ????顏色:
          <INPUT??usage="color">#f0f0f0<BR>

          ????連接:
          <INPUT??usage="url">http://www.cnblogs.com/ttyp<BR>

          ????中文:
          <INPUT??usage="chinese">只能中文<BR>
          ????ascii:
          <INPUT??usage="ascii">只能abc<BR>

          ????郵編:
          <INPUT??usage="zipcode">200083<BR>

          ????手機:
          <INPUT??usage="mobile">13678452345<BR>????
          ????IP:
          <INPUT??usage="ip4">192.168.0.1<BR>
          ????圖片:
          <INPUT?type=file?usage="picture">c:\a.jpg<BR>
          ????壓縮文件:
          <INPUT?type=file?usage="rar">c:\a.rar<BR>
          ????日期:
          <INPUT?usage="date">2005-04-12<BR>

          ????
          <INPUT?type=submit?value=提交查詢內容>
          </FORM>
          </BODY>
          </HTML>

          單條彈出式提示:
          <HTML>
          <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
          <HEAD>
          <SCRIPT?language=JavaScript?src="checkform.js"></script>
          <SCRIPT?LANGUAGE="JavaScript">
          <!--

          //彈出式報警
          g_check.alert????=?true;

          //單條報警
          g_check.showAll?=?false;


          function?test()
          {

          ????
          try
          ????{
          ????????
          var?aa?=?document.getElementById("a").value;
          ????????
          var?bb?=?document.getElementById("b").value;
          ????????
          var?cc?=?document.getElementById("c").value;

          ????????
          if(!isNaN(aa)&&!isNaN(bb)&&!isNaN(cc)&&aa.length>0&&bb.length>0&&cc.length>0)
          ????????{
          ????????????
          return?aa*1+bb*1>cc*1;
          ????????}
          ????????
          else
          ????????{
          ????????????
          return?false;
          ????????}

          ????}
          catch(e){alert();return?false;}
          }

          function?submitme(f){
          ????
          if(g_check.checkForm(f))f.submit();
          }
          //-->
          </SCRIPT>
          </HEAD>
          <BODY>單條彈出式提示測試:?
          <FORM?name=form1?>

          ????a:
          <INPUT?id=a?usage="num"><BR>
          ????b:
          <INPUT?id=b?usage="num"?><BR>

          ????c:
          <INPUT?id=c?usage="test()"?tip="a+b>c">a+b>c<BR>
          ????
          ????
          <INPUT?type=button?value=普通按鈕提交?onclick="submitme(this.form)">
          </FORM>
          </BODY>
          </HTML>


          checkForm.js下載
          posted on 2006-08-28 22:20 Alex 閱讀(514) 評論(0)  編輯  收藏 所屬分類: web技術
          主站蜘蛛池模板: 色达县| 沧州市| 达州市| 湘西| 天津市| 自治县| 岢岚县| 西宁市| 乌苏市| 高雄县| 定边县| 永福县| 呼图壁县| 合作市| 西乌| 新巴尔虎左旗| 读书| 赞皇县| 涿州市| 乌鲁木齐市| 孙吴县| 霍邱县| 丽江市| 桓台县| 神农架林区| 西安市| 甘孜县| 新乡市| 永嘉县| 临汾市| 崇左市| 获嘉县| 丰镇市| 沅江市| 新乐市| 渑池县| 南雄市| 额济纳旗| 叙永县| 焉耆| 灵石县|