在B/S開發中經常用到的JavaScript技術第1/3頁_javascript技巧

來源:互聯網
上載者:User
一、驗證類
1、數字驗證內
  1.1 整數
  1.2 大於0的整數 (用於傳來的ID的驗證)
  1.3 負整數的驗證
  1.4 整數不能大於iMax
  1.5 整數不能小於iMin
2、時間類
  2.1 短時間,形如 (13:04:06)
  2.2 短日期,形如 (2003-12-05)
  2.3 長時間,形如 (2003-12-05 13:04:06)
  2.4 只有年和月。形如(2003-05,或者2003-5)
  2.5 只有小時和分鐘,形如(12:03)
3、表單類
  3.1 所有的表單的值都不可為空
  3.2 多行文字框的值不可為空。
  3.3 多行文字框的值不能超過sMaxStrleng
  3.4 多行文字框的值不能少於sMixStrleng
  3.5 判斷單選框是否選擇。
  3.6 判斷複選框是否選擇.
  3.7 複選框的全選,多選,全不選,反選
  3.8 檔案上傳過程中判斷檔案類型
4、字元類
  4.1 判斷字元全部由a-Z或者是A-Z的字字母組成
  4.2 判斷字元由字母和數字組成。
  4.3 判斷字元由字母和數字,底線,點號組成.且開頭的只能是底線和字母
  4.4 字串替換函數.Replace();
5、瀏覽器類
  5.1 判斷瀏覽器的類型
  5.2 判斷ie的版本
  5.3 判斷用戶端的解析度

6、結合類
  6.1 email的判斷。
  6.2 手機號碼的驗證
  6.3 身份證的驗證


二、功能類

1、時間與相關控制項類
  1.1 日曆
  1.2 時間控制項
  1.3 萬年曆
  1.4 顯示動態顯示時鐘效果(文本,如OA中時間)
  1.5 顯示動態顯示時鐘效果 (映像,像手錶) 
2、表單類
  2.1 自動產生表單
  2.2 動態添加,修改,刪除下拉框中的元素
  2.3 可以輸入內容的下拉框
  2.4 多行文字框中只能輸入iMax文字。如果多輸入了,自動減少到iMax個文字(多用於簡訊發送)

3、列印類
  3.1 列印控制項
4、事件類別
  4.1 屏蔽右鍵
  4.2 屏蔽所有功能鍵
  4.3 --> 和<-- F5 F11,F9,F1
  4.4 屏蔽按鍵組合ctrl+N
5、網頁設計類
  5.1 連續滾動的文字,圖片(注意是連續的,兩段文字和圖片中沒有空白出現)
  5.2 html編輯控制項類
  5.3 顏色選取框控制項
  5.4 下拉式功能表
  5.5 兩層或多層次的下拉式功能表
  5.6 仿IE菜單的按鈕。(效果如rongshuxa.com的導覽列目)
  5.7 狀態列,title欄的動態效果(例子很多,可以研究一下)
  5.8 雙擊後,網頁自動滾屏
6、樹型結構。
  6.1 asp+SQL版
  6.2 asp+xml+sql版
  6.3 java+sql或者java+sql+xml
7、無邊框效果的製作
8、連動下拉框技術
9、文本排序


一、驗證類
1、數字驗證內
  1.1 整數
      /^(-|\+)?\d+$/.test(str)
  1.2 大於0的整數 (用於傳來的ID的驗證)
      /^\d+$/.test(str)
  1.3 負整數的驗證
      /^-\d+$/.test(str)
2、時間類
  2.1 短時間,形如 (13:04:06)
      function isTime(str)
      {
        var a = str.match(/^(\d{1,2})(:)?(\d{1,2})\2(\d{1,2})$/);
        if (a == null) {alert('輸入的參數不是時間格式'); return false;}
        if (a[1]>24 || a[3]>60 || a[4]>60)
        {
          alert("時間格式不對");
          return false
        }
        return true;
      }
  2.2 短日期,形如 (2003-12-05)
      function strDateTime(str)
      {
         var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
         if(r==null)return false; 
         var d= new Date(r[1], r[3]-1, r[4]); 
         return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
      }
  2.3 長時間,形如 (2003-12-05 13:04:06)
      function strDateTime(str)
      {
        var reg = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2}) (\d{1,2}):(\d{1,2}):(\d{1,2})$/; 
        var r = str.match(reg); 
        if(r==null)return false; 
        var d= new Date(r[1], r[3]-1,r[4],r[5],r[6],r[7]); 
        return (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]&&d.getHours()==r[5]&&d.getMinutes()==r[6]&&d.getSeconds()==r[7]);
      }
  2.4 只有年和月。形如(2003-05,或者2003-5)
  2.5 只有小時和分鐘,形如(12:03)
3、表單類
  3.1 所有的表單的值都不可為空
      <input onblur="if(this.value.replace(/^\s+|\s+$/g,'')=='')alert('不可為空!')">
  3.2 多行文字框的值不可為空。
  3.3 多行文字框的值不能超過sMaxStrleng
  3.4 多行文字框的值不能少於sMixStrleng
  3.5 判斷單選框是否選擇。
  3.6 判斷複選框是否選擇.
  3.7 複選框的全選,多選,全不選,反選
  3.8 檔案上傳過程中判斷檔案類型
4、字元類
  4.1 判斷字元全部由a-Z或者是A-Z的字字母組成
      <input onblur="if(/[^a-zA-Z]/g.test(this.value))alert('有錯')">
  4.2 判斷字元由字母和數字組成。
      <input onblur="if(/[^0-9a-zA-Z]/g.test(this.value))alert('有錯')">
  4.3 判斷字元由字母和數字,底線,點號組成.且開頭的只能是底線和字母
      /^([a-zA-z_]{1})([\w]*)$/g.test(str)
  4.4 字串替換函數.Replace();
5、瀏覽器類
  5.1 判斷瀏覽器的類型
      window.navigator.appName
  5.2 判斷ie的版本
      window.navigator.appVersion
  5.3 判斷用戶端的解析度
      window.screen.height;  window.screen.width;

6、結合類
  6.1 email的判斷。
      function ismail(mail)
      {
        return(new RegExp(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/).test(mail));
      }
  6.2 手機號碼的驗證
  6.3 身份證的驗證
      function isIdCardNo(num)
      {
        if (isNaN(num)) {alert("輸入的不是數字!"); return false;}
        var len = num.length, re; 
        if (len == 15)
          re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
        else if (len == 18)
          re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
        else {alert("輸入的數字位元不對!"); return false;}
        var a = num.match(re);
        if (a != null)
        {
          if (len==15)
          {
            var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
          }
          else
          {
            var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
            var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
          }
          if (!B) {alert("輸入的社會安全號碼 "+ a[0] +" 裡出生日期不對!"); return false;}
        }
        return true;
      }

3.7 複選框的全選,多選,全不選,反選
<form name=hrong>
<input type=checkbox name=All onclick="checkAll('mm')">全選<br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/>
<input type=checkbox name=mm onclick="checkItem('All')"><br/><br/>


<input type=checkbox name=All2 onclick="checkAll('mm2')">全選<br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>
<input type=checkbox name=mm2 onclick="checkItem('All2')"><br/>

</form>

<SCRIPT LANGUAGE="JavaScript">
function checkAll(str)
{
  var a = document.getElementsByName(str);
  var n = a.length;
  for (var i=0; i<n; i++)
  a[i].checked = window.event.srcElement.checked;
}
function checkItem(str)
{
  var e = window.event.srcElement;
  var all = eval("document.hrong."+ str);
  if (e.checked)
  {
    var a = document.getElementsByName(e.name);
    all.checked = true;
    for (var i=0; i<a.length; i++)
    {
      if (!a[i].checked){ all.checked = false; break;}
    }
  }
  else all.checked = false;
}
</SCRIPT>

3.8 檔案上傳過程中判斷檔案類型
<input type=file onchange="alert(this.value.match(/^(.*)(\.)(.{1,8})$/)[3])">

畫圖:
<OBJECT 
id=S 
style="LEFT: 0px; WIDTH: 392px; TOP: 0px; HEIGHT: 240px" 
height=240 
width=392 
classid="clsid:369303C2-D7AC-11D0-89D5-00A0C90833E6">
</OBJECT>
<SCRIPT>
S.DrawingSurface.ArcDegrees(0,0,0,30,50,60);
S.DrawingSurface.ArcRadians(30,0,0,30,50,60);
S.DrawingSurface.Line(10,10,100,100);
</SCRIPT>

寫註冊表:
<SCRIPT>
var WshShell = WScript.CreateObject("WScript.Shell");
WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\", 1, "REG_BINARY");
WshShell.RegWrite ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader", "Goocher!", "REG_SZ");
var bKey =    WshShell.RegRead ("HKCU\\Software\\ACME\\FortuneTeller\\");
WScript.Echo (WshShell.RegRead ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader"));
WshShell.RegDelete ("HKCU\\Software\\ACME\\FortuneTeller\\MindReader");
WshShell.RegDelete ("HKCU\\Software\\ACME\\FortuneTeller\\");
WshShell.RegDelete ("HKCU\\Software\\ACME\\");
</SCRIPT>

TABLAE相關(用戶端動態增加行列)
<HTML>
<SCRIPT LANGUAGE="JScript">
function numberCells() {
    var count=0;
    for (i=0; i < document.all.mytable.rows.length; i++) {
        for (j=0; j < document.all.mytable.rows(i).cells.length; j++) {
            document.all.mytable.rows(i).cells(j).innerText = count;
            count++;
        }
    }
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id=mytable border=1>
<TR><TH> </TH><TH> </TH><TH> </TH><TH> </TH></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TABLE>
</BODY>
</HTML> 

1.身份證嚴格驗證:

<script>
var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"內蒙古",21:"遼寧",22:"吉林",23:"黑龍江",31:"上海",32:"江蘇",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山東",41:"河南",42:"湖北",43:"湖南",44:"廣東",45:"廣西",46:"海南",50:"重慶",51:"四川",52:"貴州",53:"雲南",54:"西藏",61:"陝西",62:"甘肅",63:"青海",64:"寧夏",65:"新疆",71:"台灣",81:"香港",82:"澳門",91:"國外"}

function cidInfo(sId){
 var iSum=0
 var info=""
 if(!/^\d{17}(\d|x)$/i.test(sId))return false;
 sId=sId.replace(/x$/i,"a");
 if(aCity[parseInt(sId.substr(0,2))]==null)return "Error:非法地區";
 sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
 var d=new Date(sBirthday.replace(/-/g,"/"))
 if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return "Error:非法生日";
 for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11)
 if(iSum%11!=1)return "Error:非法證號";
 return aCity[parseInt(sId.substr(0,2))]+","+sBirthday+","+(sId.substr(16,1)%2?"男":"女")
}

document.write(cidInfo("380524198002300016"),"<br/>");
document.write(cidInfo("340524198002300019"),"<br/>")
document.write(cidInfo("340524197711111111"),"<br/>")
document.write(cidInfo("34052419800101001x"),"<br/>");
</script>

2.驗證IP地址
<SCRIPT LANGUAGE="JavaScript">
function isip(s){
 var check=function(v){try{return (v<=255 && v>=0)}catch(x){return false}};
 var re=s.split(".")
 return (re.length==4)?(check(re[0]) && check(re[1]) && check(re[2]) && check(re[3])):false
}

var s="202.197.78.129";
alert(isip(s))
</SCRIPT> 

 
當前1/3頁  123下一頁閱讀全文

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.