《JavaScript程序設計案例教程》課件-案例6_第1頁
《JavaScript程序設計案例教程》課件-案例6_第2頁
《JavaScript程序設計案例教程》課件-案例6_第3頁
《JavaScript程序設計案例教程》課件-案例6_第4頁
《JavaScript程序設計案例教程》課件-案例6_第5頁
已閱讀5頁，還剩70頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

案例六、表單驗證學習目標知識鏈接案例實現效果演示目錄學完本章節應該能做到的事情學習目標壹學習目標掌握表單的幾個重要事件。能進行表單的有效性驗證。掌握BOM對象的用法。PPT模板/moban/理解和掌握正則表達式。掌握Date對象。掌握Math對象。效果演示完成本案例應該具備的知識知識鏈接貳知識鏈接列表PPT模板/moban/表單的submit事件。表單的focus和blur事件。正則表達式。Date對象。Math對象。BOM對象。表單的submit事件1表單提交：指把用戶在表單中輸入的數據提交給服務器上某個動態腳本文件。submit事件：表單數據提交的這個動作就是表單提交事件，即submit事件。submit事件作用：就是在真正提交給服務器前對數據進行有效性驗證，過濾掉不符合要求的數據，減輕服務器的負擔。放在服務器端不好嗎？為什么能減輕服務器的負擔表單的submit事件101點擊提交按鈕02調用表單的submit方法Submit事件觸發的方式表單的submit事件1圖6-1表單提交流程圖表單的submit事件1以提交按鈕觸發submit事件(form_submit1.html)<formaction="#"method="post"onsubmit="returncheckForm();"> <inputtype="submit"value="我是提交按鈕"/></form><script> functioncheckForm(){ alert('你觸發我了'); returntrue; }</script>表單的submit事件1以提交按鈕觸發submit事件(form_submit2.html)<formaction="#"method="post"> <buttontype="submit">我是提交按鈕</button> <button>我也是提交按鈕</button></form><script> document.querySelector('form').onsubmit=checkForm; functioncheckForm(){ alert('你觸發我了'); returntrue; }</script>表單的submit事件1以submit()方法觸發submit事件(form_submit3.html)<formaction="#"method="post"> <inputtype="text"/></form><buttontype="button">我不是提交按鈕，也能提交</button><script> document.querySelector('form').onsubmit=checkForm; functioncheckForm(){ alert('你觸發我了'); returntrue; } document.querySelector('button[type=button]').onclick=function(){ document.querySelector('form').onsubmit(); }</script>表單的focus和blur事件2什么是焦點？JS中的焦點處理包括：獲取焦點（focus）失去焦點（blur）。表單的focus和blur事件2獲得焦點的方式：當用戶點擊表單字段按TAB鍵時表單元素會獲得焦點。autofocus屬性可以設置元素獲取默認焦點。失去焦點的方式：當用戶點擊頁面的其他位置按下TAB鍵也可以使當前具有焦點的表單元素失去焦點。失去焦點時刻可能更重要，因為失去焦點意味著數據輸入已經完成，可以運行代碼檢查輸入的數據或者保存數據到服務器等。表單的focus和blur事件2焦點的獲得與失去(focus_blur.html)<style>input{ padding:5px; outline:none; display:block; margin:5px;}input:focus{ border-color:#0099FF;}</style><body><inputvalue="失去焦點中。。。"/><inputautofocus="autofocus"value="獲得焦點中。。。"/><inputtype="button"value="來啊，點一下"/></body>表單的focus和blur事件2焦點的獲得與失去(focus_blur.html)<script> document.querySelector("input[type=button]").onclick=function(){ document.querySelector("input").focus(); } document.querySelectorAll("input")[0].onfocus=function(){ this.value="獲得焦點中。。。"; } document.querySelectorAll("input")[0].onblur=function(){ this.value="失去焦點中。。。"; } document.querySelectorAll("input")[1].onfocus=function(){ this.value="獲得焦點中。。。"; } document.querySelectorAll("input")[1].onblur=function(){ this.value="失去焦點中。。。"; }</script>正則表達式3正則表達式（RegularExpression）是使用單個字符串來描述、匹配一系列符合某個句法規則的字符串。它的作用是文本搜索和文本替換。在表單里最重要的一條用途：就是在submit事件中進行數據的有效性驗證。正則表達式3語法：varptn=/正則表達式主體/修飾符(可選)或varptn=newRegExp(正則表達式主體,[修飾符])正則表達式3正則表達式演示(Regexp1.html)varstr="HelloJavascript";varpos=str.search(/java/i);console.log(pos);修飾符search()方法用于檢索字符串中指定的子字符串正則表達式表達式主體正則表達式3表6-1正則表達式的修飾符修飾符描述i匹配時忽略大小寫g查找到所有匹配的結果m多行匹配y也是全局匹配，后一次匹配都從上一次匹配成功的下一個位置開始u“Unicode模式”，用來正確處理大于\uFFFF的Unicode字符。也就是說，會正確處理四個字節的UTF-16編碼正則表達式3表6-2元字符元字符描述.匹配單個字符，除了換行和行結束符\w匹配單詞字符\W匹配非單詞字符\d匹配數字\D匹配非數字字符\s匹配空白字符\S匹配非空白字符\b匹配單詞邊界\B匹配非單詞邊界\0匹配NUL字符\n匹配換行符\f匹配換頁符\r匹配回車符\t匹配制表符\v匹配垂直制表符\xxx匹配以八進制數

xxxx

規定的字符\xdd匹配以十六進制數

dd

規定的字符\uxxxx匹配以十六進制

xxxx規定的Unicode

字符^匹配字符串的開始位置$匹配字符串的結束位置正則表達式3表6-3量詞量詞描述n+匹配任何包含至少一個

n

的字符串n*匹配任何包含零個或多個

n

的字符串n?匹配任何包含零個或一個

n

的字符串n{x}匹配包含

x

個

n

的序列的字符串n{x,y}匹配包含最少

x

個、最多

y

個

n

的序列的字符串n{x,}匹配包含至少

x

個

n

的序列的字符串正則表達式3表6-4其他字符表達式描述x|y匹配x或者y[xyz]匹配x、y、z中的任意一個[a-z]匹配a-z中的任意一個字符()將括號里面的字符作為整體進行匹配,括號里面的內容是一個子表達式或者叫分組?:匹配冒號后的內容但是不獲取匹配結果；不進行儲存供以后使用正則表達式30102字符串方法：search()、replace()、match()正則表達式方法：test()、exec()正則表達式通常用于：正則表達式3varstr="IloveyouLucy!";varreg=newRegExp("L(?:\\w)+","");//reg=/L(?:\w)+!/;varnewstr=str.replace(reg,"Lilith");console.log(newstr);replace()方法：執行檢索和替換操作，它的第一個參數是正則表達式，第二個參數是要進行替換的字符串或者閉包。這兩句造價，但是寫法略有不同正則表達式replace(Regexp2.html)正則表達式3varstr="IloveyouLucy!";varreg=newRegExp("l\\w+","ig");console.log(str.match(reg));match()方法參數是正則表達式，返回null或者數組。如果正則表達式包含了標志g，那么返回的數據中包含了所有匹配文本的信息；如果該正則表達式不包含標志g，則數組中只是包含第一次匹配的字符串的信息正則表達式match(Regexp3.html)正則表達式3varstr="IloveyouLucy!";varreg=newRegExp();pile("\\s\\w{4}\\s","g")console.log(reg.test(str));

varreg1=newRegExp();pile("\\s\\w{3}\\s","g")console.log(reg1.test(str));

varreg2=newRegExp();pile("\\s\\w{2}\\s","g")console.log(reg2.test(str));compile方法把正則表達式編譯為內部格式，從而執行得更快。正則表達式test(Regexp4.html)test()方法：用于檢測一個字符串是否匹配某個模式，如果字符串中含有匹配的文本，則返回true，否則返回false正則表達式3varstr="IloveyouLucy!";varreg=newRegExp("\\s\\w{4}\\s","");console.log(reg.exec(str));console.log(reg.exec(str));

varreg1=newRegExp("\\s\\w{4}\\s","g");console.log(reg1.exec(str));console.log(reg1.exec(str));正則表達式exec(Regexp5.html)exec()方法：用正則表達式模式在字符串中運行查找，并返回包含查找結果的一個數組。如果未找到匹配的結果，則返回值為null。為什么exec都調用了2次？老師多寫了一行嗎？Date對象4作用：處理日期和時間。本節介紹三種創建Date對象的方法。Date對象4newDate()，返回此時的本地日期時間的date對象newDate(毫秒數)，返回一個通過毫秒數轉變的date對象letd=newDate();console.log(d);vard1=newDate(1000*60*1);//返回相比標準時間點前進了1分鐘的date對象console.log(d1);//輸出ThuJan01197008:01:00GMT+0800(中國標準時間)因為是在中國，所以是以東八區作為標準時間點的d1=newDate(-1000*3600*24);//返回相比標準時間點倒退了1天的date對象console.log(d1);//輸出WedDec31196908:00:00GMT+0800(中國標準時間)Date對象4newDate(format字符串)，返回一個通過字符串轉變的date對象format字符串的常用格式主要有兩種"yyyy/MM/ddHH:mm:ss"（推薦方式）：若省略時間，返回的Date對象的時間為00:00:00。"yyyy-MM-ddHH:mm:ss"：若省略時間，返回的Date對象的時間為08:00:00(加上本地時區)。若不省略時間，此字符串在IE中會報錯vardt=newDate('2022/04/25');console.log(dt);dt=newDate('2022/04/2512:00:00');console.log(dt);

dt=newDate('2022-04-25');console.log(dt);dt=newDate('2022-04-2512:00:00');console.log(dt);Date對象4newDate(year,month,day,hours,minutes,seconds,milliseconds)，把年月日、時分秒轉變成date對象參數：year：整數，4位或者2位數字。如：四位1999表示1999年，兩位97表示1979年month：整數，2位數字。從0開始計算，0表示1月份、11表示12月份。day：整數，可選，2位數字hours：整數，可選，2位數字，范圍0~23。minutes：整數，可選，2位數字，范圍0~59。seconds：整數，可選，2位數字，范圍0~59。milliseconds：整數，可選，范圍0~999。Date對象4vardt=newDate(2022,03);//2022年4月console.log(dt);dt=newDate(2022,3,25);//2022年4月25日console.log(dt);dt=newDate(2022,3,25,15,30,40);//2022年4月25日15點30分40秒console.log(dt);Date對象4表6-5Date對象方法方法描述getDate()從Date對象返回一個月中的某一天(1~31)。getDay()從Date對象返回一周中的某一天(0~6)。getFullYear()從Date對象以四位數字返回年份。getHours()返回Date對象的小時(0~23)。getMilliseconds()返回Date對象的毫秒(0~999)。getMinutes()返回Date對象的分鐘(0~59)。getMonth()從Date對象返回月份(0~11)。getSeconds()返回Date對象的秒數(0~59)。getTime()返回1970年1月1日至今的毫秒數。parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒數。setDate()設置Date對象中月的某一天(1~31)。setFullYear()設置Date對象中的年份（四位數字）。setHours()設置Date對象中的小時(0~23)。setMilliseconds()設置Date對象中的毫秒(0~999)。setMinutes()設置Date對象中的分鐘(0~59)。setMonth()設置Date對象中月份(0~11)。setSeconds()設置Date對象中的秒鐘(0~59)。setTime()setTime()方法以毫秒設置Date對象。toDateString()把Date對象的日期部分轉換為字符串。toString()把Date對象轉換為字符串。toTimeString()把Date對象的時間部分轉換為字符串。Date對象4Dtotype.Format=function(fmt){ varo={ "M+":this.getMonth()+1,//月份

"d+":this.getDate(),//日

"h+":this.getHours(),//小時

"m+":this.getMinutes(),//分

"s+":this.getSeconds(),//秒

"q+":Math.floor((this.getMonth()+3)/3),//季度

"S":this.getMilliseconds()//毫秒

}; if(/(y+)/.test(fmt)) fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4-RegExp.$1.length)); for(varkino) if(newRegExp("("+k+")").test(fmt)) fmt=fmt.replace(RegExp.$1 ,(RegExp.$1.length==1)?(o[k]):(("00"+o[k]).substr((""+o[k]).length))); returnfmt;}date對象(date.html)RegExp.$1是RegExp的一個屬性,指的是與正則表達式匹配的第一個子匹配(以括號為標志)字符串Date對象4letweekArr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];vard=newDate();console.log(weekArr[d.getDay()]);//調用：vartime1=newDate().Format("yyyy-MM-dd");vartime2=newDate().Format("yyyy-MM-ddhh:mm:ss");console.log(time1);console.log(time2);date對象(date.html)Math對象5Math對象用于進行數學運算。它和其他的對象不同，它只是一個普通對象，不是一個構造函數，因此使用時不用實例化。Math對象5表6-6Math對象屬性屬性描述E返回算術常量e，即自然對數的底數（約等于2.718）。LN2返回2的自然對數（約等于0.693）。LN10返回10的自然對數（約等于2.302）。LOG2E返回以2為底的e的對數（約等于1.4426950408889634）。LOG10E返回以10為底的e的對數（約等于0.434）。PI返回圓周率（約等于3.14159）。SQRT2返回2的平方根（約等于1.414）。Math對象5表6-7Math對象方法方法描述abs(x)返回x的絕對值。acos(x)返回x的反余弦值。asin(x)返回x的反正弦值。atan(x)以介于-PI/2與PI/2弧度之間的數值來返回x的反正切值。atan2(y,x)返回從x軸到點(x,y)的角度（介于-PI/2與PI/2弧度之間）。ceil(x)對數進行上舍入。cos(x)返回數的余弦。exp(x)返回Ex

的指數。floor(x)對x進行下舍入。log(x)返回數的自然對數（底為e）。max(x,y,z,...,n)返回x,y,z,...,n中的最高值。min(x,y,z,...,n)返回x,y,z,...,n中的最低值。pow(x,y)返回x的y次冪。random()返回0~1之間的隨機數。round(x)四舍五入。sin(x)返回數的正弦。sqrt(x)返回數的平方根。tan(x)返回角的正切。Math對象5console.log(Math.abs('123'));//=>123純數字字符串console.log(Math.abs('-123'));//=>123console.log(Math.abs(123));//=>123console.log(Math.abs(-123));//=>123console.log(Math.abs('123a'));//=>NaN非純數字字符串

console.log(Math.ceil(2.7));//=>3console.log(Math.ceil(2.3));//=>32.3向上取整返回3console.log(Math.ceil(-2.7));//=>-2console.log(Math.ceil(-2.3));//=>-2console.log(Math.ceil('2.7'));//=>3純數字字符串console.log(Math.ceil('2.7a'));//=>NaN非純數字字符串console.log(Math.floor(2.7));//=>2console.log(Math.floor(2.3));//=>2console.log(Math.floor(-2.7));//=>-3-2.7向下取整返回-3console.log(Math.floor(-2.3));//=>-3console.log(Math.floor('2.7'));//=>2純數字字符串console.log(Math.floor('2.7a'));//=>NaN非純數字字符串Math對象演示(math.html)Math對象5console.log(Math.max(1,2,3,4,5));//=>5console.log(Math.max(1,2,3,4,'5'));//=>5console.log(Math.max(1,2,3,4,'a'));//=>NaNconsole.log(Math.min(1,2,3,4,5));//=>1console.log(Math.min('1',2,3,4,5));//=>1console.log(Math.min(1,2,3,4,'a'));//=>NaNconsole.log(Math.pow(2,3));//=>82的3次方console.log(Math.pow(3,2));//=>93的2次方console.log(Math.pow('4',2));//=>164的2次方console.log(Math.pow('2a',2));//=>NaNconsole.log(Math.round(2.5));//=>3向上四舍五入console.log(Math.round(2.4));//=>2console.log(Math.round(-2.6));//=>-3console.log(Math.round(-2.5));//=>-2向上四舍五入console.log(Math.round(-2.4));//=>-2console.log(Math.round('2.7'));//=>3純數字字符串console.log(Math.round('2.7a'));//=>NaN非純數字字符串console.log(Math.sqrt(9));//=>3console.log(Math.sqrt('b'));//=>NaNMath對象演示(math.html)Math對象5<button>變色</button><scripttype="text/javascript"> varchr=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F’]; document.querySelector('button').onclick=function(){ letcolor="#"; for(leti=0;i<6;i++) { letindex=Math.floor(Math.random()*chr.length); color+=chr[index]; } document.body.style.backgroundColor=color; }</script>隨機生成顏色(mathColor.html)BOM對象6BOM是指BrowserObjectModel（瀏覽器對象模型），瀏覽器對象模型提供了可以與瀏覽器窗口進行互動的對象，BOM由多個對象構成，其中代表瀏覽器窗口的window對象是BOM的頂層對象，其他對象都是該對象的子對象。BOM常用的一些對象有：window對象document對象location對象navigator對象screen對象BOM對象6location對象演示(location.html)<button>打開百度</button><scripttype="text/javascript"> document.querySelector("button").onclick=function(){ window.location.href=""; }</script>BOM對象6navigator對象演示(navigator.html)varua=navigator.userAgent.toLowerCase();//獲取用戶端信息varbinfo={ ie:/msie/.test(ua)&&!/opera/.test(ua),//匹配IE瀏覽器

op:/opera/.test(ua),//匹配Opera瀏覽器

sa:/version.*safari/.test(ua),//匹配Safari瀏覽器

ch:/chrome/.test(ua),//匹配Chrome瀏覽器

ff:/gecko/.test(ua)&&!/webkit/.test(ua)//匹配Firefox瀏覽器

};(binfo.ie)&&console.log("IE瀏覽器");(binfo.op)&&console.log("Opera瀏覽器");(binfo.sa)&&console.log("Safari瀏覽器");(binfo.ch)&&console.log("Chrome瀏覽器");(binfo.ff)&&console.log("Firefox瀏覽器");BOM對象6screen對象演示(screen.html)document.writeln('總高度:'+screen.height+'<br>’);document.writeln('總寬度:'+screen.width+'<br>’);document.writeln('不包括任務欄的高度:'+screen.availHeight+'<br>’);document.writeln('不包括任務欄的寬度:'+screen.availWidth+'<br>’);document.writeln('屏幕的顏色分辨率:'+screen.pixelDepth);BOM對象6history對象演示(history.html)<button>前進</button><scripttype="text/javascript"> document.querySelector("button").onclick=function(){ history.go(1); history.back(); history.forward(); }</script>完成本章綜合案例案例實現貳設計思路1實現表單驗證的方式：H5的新屬性支持表單驗證；使用JS可以實現，使用JS也有兩種方式：一是使用正則表達式驗證；二是使用其他一些對字符串的操作方法來實現使用jquery或者其他框架也可以實現實現步驟--設計頁面架構2本案例表單中包含六個表單元素驗證：字符串格式、電話格式、年齡格式、電子郵箱格式、身份證號格式日期格式；這些驗證包括了平常使用場景中的大部分要求實現步驟--設計頁面架構2<formaction="#"method="get"><h3>聯系人</h3><divclass="items"><div> <spanclass="label">姓名：</span> <inputname="name"placeholder="以字母開頭,長度為4-8位"autocomplete="off"></div><div> <spanclass="label">電話：</span> <inputname="phone"placeholder="固話或手機"autocomplete="off"></div><div> <spanclass="label">年齡：</span> <inputname="age"placeholder="年齡區間：18-38"autocomplete="off"></div><div> <spanclass="label">電子郵箱：</span> <inputname="email"autocomplete="off"></div>實現步驟--設計頁面架構2 <spanclass="label">電子郵箱：</span> <inputname="email"autocomplete="off"></div><div> <spanclass="label">身份證號：</span> <inputname="idno"autocomplete="off"></div><div> <spanclass="label">日期：</span> <inputname="date"placeholder="格式：xxxx-xx-xx或xxxx/xx/xx1980-2019"autocomplete="off"></div></div><divclass="save"> <button>保存</button></div></form>實現步驟--美化元素2*{box-sizing:border-box;}form{ width:80%; box-shadow:02px3px2px#ddd; margin:auto;}整體上來說表單占據瀏覽器窗口的大部分空格，但是又不鋪滿，整體是水平居中效果，其樣式代碼如下：實現步驟--美化元素2h3{ padding:5px20px; border-bottom:1pxsolid#ddd; background:url(images/edit.png)no-repeat; background-size:12px18px; background-position:5px9px;}表單的標題顯示在表單的左上角位置、加粗且有一個小圖標顯示，代碼如下：實現步驟--美化元素2div.items{ display:flex; flex-wrap:wrap; padding:10px30px;}div.items>div{ width:50%; padding:5px; display:flex; line-height:26px;}div.items>div>.label{ text-align:right; min-width:100px;}本案例采用自適應效果，在大尺寸顯示時一行顯示兩個表單元素，每個表單的標簽文字右對齊；小尺寸顯示時一行顯示一個表單元素，代碼如下：div.items>div>input{ flex-grow:1; border:1pxsolid#ddd;}@mediascreenand(max-width:768px){ body{font-size:0.8rem;} div.items>div{ width:100%; } div.items{ padding:10px5px; } div.items>div>.label{ min-width:60px; }}實現步驟--美化元素2div.save{ padding:20px; text-align:center;}div.savebutton{ background:#ddd; padding:10px30px; border:none; cursor:pointer; color:#fff;}div.savebutton:hover{ background:#0099FF;}提交按鈕默認灰色背景色，鼠標懸停時為淺藍色背景色，代碼如下：實現步驟--美化元素2input.pass{ background:linear-gradient(toright,#009933,#00FF99)!important;}input.error{ background:linear-gradient(toright,red,#FF9966)!important;}input{outline:none;}表單元素默認沒有輸入焦點框，驗證通過的元素背景色為綠色漸變色，驗證失敗的元素背景色為紅色漸變背景色，代碼如下：實現步驟--美化元素2圖6-3小屏幕時的效果圖實現步驟--美化元素2圖6-4大屏幕時的效果圖實現步驟--獲取所有需要操作的元素2因為在多個方法中都要對表單元素進行操作，所以提前獲取這些元素。varuserName=document.querySelector('input[name=name]');varuserPhone=document.querySelector('input[name=phone]');varuserAge=document.querySelector('input[name=age]');varuserMail=document.querySelector('input[name=email]');varuserDate=document.querySelector('input[name=date]');varuserId=document.querySelector('input[name=idno]');實現步驟--表單元素獲得焦點2每個表單元素獲得焦點時自動選擇全部內容，這樣有利于修改它的值，提升用戶體驗。其代碼如下：//獲得焦點userName.onfocus=inputFocus;userPhone.onfocus=inputFocus;userAge.onfocus=inputFocus;userMail.onfocus=inputFocus;userId.onfocus=inputFocus;userDate.onfocus=inputFocus;

functioninputFocus(){ //自動獲得焦點，并選中所有文本

this.focus(); this.selectionStart=0; this.selectionEnd=this.value.length;}實現步驟--各表單元素失去焦點2//用戶名失去焦點userName.onblur=function(e){ varnameRule=/^[a-zA-Z](\w{3,7})$/; varnameValue=userName.value; if(nameRule.exec(nameValue)==null) { userName.className="error"; } else userName.className="pass";}各表單元素失去焦點時，使用正則表達式對輸入的內容進行驗證，驗證通過的背景色變為綠色漸變效果，驗證失敗的背景色變為紅色漸變效果，形成鮮明的對比，讓用戶對驗證結果一目了然。代碼如下：實現步驟--各表單元素失去焦點2//電話號碼失去焦點userPhone.onblur=function(e){ //電話0538-12345678 //手機:11位，且指定號段

varphoneRule1=newRegExp(/^0(\d{2}|\d{3})-\d{7,8}$/); varphoneRule2=newRegExp(/^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/); if(!phoneRule1.test(userPhone.value)&&!phoneRule2.test(userPhone.value)) { userPhone.className="error"; } else userPhone.className="pass";}實現步驟--各表單元素失去焦點2//年齡失去焦點userAge.onblur=function(e){ //年齡18-38 varageRule=/1[89]|2[0-9]|3[0-8]/; if(!ageRule.test(userAge.value)) { userAge.className="error"; } else userAge.className="pass";}實現步驟--各表單元素失去焦點2//電子郵箱失去焦點userMail.onblur=function(e){ varmailRule=/^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i; if(!mailRule.test(userMail.value)) { userMail.className="error"; } else userMail.className="pass";}實現步驟--各表單元素失去焦點2//身份證號失去焦點userId.onblur=function(e){ varuserIdRule=/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; if(!userIdRule.test(userId.value)) { userId.className="err

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論