《JavaScript程序設(shè)計(jì)案例教程》課件-案例6_第1頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例6_第2頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例6_第3頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例6_第4頁(yè)
《JavaScript程序設(shè)計(jì)案例教程》課件-案例6_第5頁(yè)
已閱讀5頁(yè)，還剩70頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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

xxxx

規(guī)定的字符\xdd匹配以十六進(jìn)制數(shù)

dd

規(guī)定的字符\uxxxx匹配以十六進(jìn)制

xxxx規(guī)定的Unicode

字符^匹配字符串的開(kāi)始位置$匹配字符串的結(jié)束位置正則表達(dá)式3表6-3量詞量詞描述n+匹配任何包含至少一個(gè)

n

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

n

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

n

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

x

個(gè)

n

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

x

個(gè)、最多

y

個(gè)

n

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

x

個(gè)

n

的序列的字符串正則表達(dá)式3表6-4其他字符表達(dá)式描述x|y匹配x或者y[xyz]匹配x、y、z中的任意一個(gè)[a-z]匹配a-z中的任意一個(gè)字符()將括號(hào)里面的字符作為整體進(jìn)行匹配,括號(hào)里面的內(nèi)容是一個(gè)子表達(dá)式或者叫分組?:匹配冒號(hào)后的內(nèi)容但是不獲取匹配結(jié)果；不進(jìn)行儲(chǔ)存供以后使用正則表達(dá)式30102字符串方法：search()、replace()、match()正則表達(dá)式方法：test()、exec()正則表達(dá)式通常用于：正則表達(dá)式3varstr="IloveyouLucy!";varreg=newRegExp("L(?:\\w)+","");//reg=/L(?:\w)+!/;varnewstr=str.replace(reg,"Lilith");console.log(newstr);replace()方法：執(zhí)行檢索和替換操作，它的第一個(gè)參數(shù)是正則表達(dá)式，第二個(gè)參數(shù)是要進(jìn)行替換的字符串或者閉包。這兩句造價(jià)，但是寫(xiě)法略有不同正則表達(dá)式replace(Regexp2.html)正則表達(dá)式3varstr="IloveyouLucy!";varreg=newRegExp("l\\w+","ig");console.log(str.match(reg));match()方法參數(shù)是正則表達(dá)式，返回null或者數(shù)組。如果正則表達(dá)式包含了標(biāo)志g，那么返回的數(shù)據(jù)中包含了所有匹配文本的信息；如果該正則表達(dá)式不包含標(biāo)志g，則數(shù)組中只是包含第一次匹配的字符串的信息正則表達(dá)式match(Regexp3.html)正則表達(dá)式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方法把正則表達(dá)式編譯為內(nèi)部格式，從而執(zhí)行得更快。正則表達(dá)式test(Regexp4.html)test()方法：用于檢測(cè)一個(gè)字符串是否匹配某個(gè)模式，如果字符串中含有匹配的文本，則返回true，否則返回false正則表達(dá)式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));正則表達(dá)式exec(Regexp5.html)exec()方法：用正則表達(dá)式模式在字符串中運(yùn)行查找，并返回包含查找結(jié)果的一個(gè)數(shù)組。如果未找到匹配的結(jié)果，則返回值為null。為什么exec都調(diào)用了2次？老師多寫(xiě)了一行嗎？Date對(duì)象4作用：處理日期和時(shí)間。本節(jié)介紹三種創(chuàng)建Date對(duì)象的方法。Date對(duì)象4newDate()，返回此時(shí)的本地日期時(shí)間的date對(duì)象newDate(毫秒數(shù))，返回一個(gè)通過(guò)毫秒數(shù)轉(zhuǎn)變的date對(duì)象letd=newDate();console.log(d);vard1=newDate(1000*60*1);//返回相比標(biāo)準(zhǔn)時(shí)間點(diǎn)前進(jìn)了1分鐘的date對(duì)象console.log(d1);//輸出ThuJan01197008:01:00GMT+0800(中國(guó)標(biāo)準(zhǔn)時(shí)間)因?yàn)槭窃谥袊?guó)，所以是以東八區(qū)作為標(biāo)準(zhǔn)時(shí)間點(diǎn)的d1=newDate(-1000*3600*24);//返回相比標(biāo)準(zhǔn)時(shí)間點(diǎn)倒退了1天的date對(duì)象console.log(d1);//輸出WedDec31196908:00:00GMT+0800(中國(guó)標(biāo)準(zhǔn)時(shí)間)Date對(duì)象4newDate(format字符串)，返回一個(gè)通過(guò)字符串轉(zhuǎn)變的date對(duì)象format字符串的常用格式主要有兩種"yyyy/MM/ddHH:mm:ss"（推薦方式）：若省略時(shí)間，返回的Date對(duì)象的時(shí)間為00:00:00。"yyyy-MM-ddHH:mm:ss"：若省略時(shí)間，返回的Date對(duì)象的時(shí)間為08:00:00(加上本地時(shí)區(qū))。若不省略時(shí)間，此字符串在IE中會(huì)報(bào)錯(cuò)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對(duì)象4newDate(year,month,day,hours,minutes,seconds,milliseconds)，把年月日、時(shí)分秒轉(zhuǎn)變成date對(duì)象參數(shù)：year：整數(shù)，4位或者2位數(shù)字。如：四位1999表示1999年，兩位97表示1979年month：整數(shù)，2位數(shù)字。從0開(kāi)始計(jì)算，0表示1月份、11表示12月份。day：整數(shù)，可選，2位數(shù)字hours：整數(shù)，可選，2位數(shù)字，范圍0~23。minutes：整數(shù)，可選，2位數(shù)字，范圍0~59。seconds：整數(shù)，可選，2位數(shù)字，范圍0~59。milliseconds：整數(shù)，可選，范圍0~999。Date對(duì)象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點(diǎn)30分40秒console.log(dt);Date對(duì)象4表6-5Date對(duì)象方法方法描述getDate()從Date對(duì)象返回一個(gè)月中的某一天(1~31)。getDay()從Date對(duì)象返回一周中的某一天(0~6)。getFullYear()從Date對(duì)象以四位數(shù)字返回年份。getHours()返回Date對(duì)象的小時(shí)(0~23)。getMilliseconds()返回Date對(duì)象的毫秒(0~999)。getMinutes()返回Date對(duì)象的分鐘(0~59)。getMonth()從Date對(duì)象返回月份(0~11)。getSeconds()返回Date對(duì)象的秒數(shù)(0~59)。getTime()返回1970年1月1日至今的毫秒數(shù)。parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒數(shù)。setDate()設(shè)置Date對(duì)象中月的某一天(1~31)。setFullYear()設(shè)置Date對(duì)象中的年份（四位數(shù)字）。setHours()設(shè)置Date對(duì)象中的小時(shí)(0~23)。setMilliseconds()設(shè)置Date對(duì)象中的毫秒(0~999)。setMinutes()設(shè)置Date對(duì)象中的分鐘(0~59)。setMonth()設(shè)置Date對(duì)象中月份(0~11)。setSeconds()設(shè)置Date對(duì)象中的秒鐘(0~59)。setTime()setTime()方法以毫秒設(shè)置Date對(duì)象。toDateString()把Date對(duì)象的日期部分轉(zhuǎn)換為字符串。toString()把Date對(duì)象轉(zhuǎn)換為字符串。toTimeString()把Date對(duì)象的時(shí)間部分轉(zhuǎn)換為字符串。Date對(duì)象4Dtotype.Format=function(fmt){ varo={ "M+":this.getMonth()+1,//月份

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

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

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

的指數(shù)。floor(x)對(duì)x進(jìn)行下舍入。log(x)返回?cái)?shù)的自然對(duì)數(shù)（底為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之間的隨機(jī)數(shù)。round(x)四舍五入。sin(x)返回?cái)?shù)的正弦。sqrt(x)返回?cái)?shù)的平方根。tan(x)返回角的正切。Math對(duì)象5console.log(Math.abs('123'));//=>123純數(shù)字字符串console.log(Math.abs('-123'));//=>123console.log(Math.abs(123));//=>123console.log(Math.abs(-123));//=>123console.log(Math.abs('123a'));//=>NaN非純數(shù)字字符串

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純數(shù)字字符串console.log(Math.ceil('2.7a'));//=>NaN非純數(shù)字字符串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純數(shù)字字符串console.log(Math.floor('2.7a'));//=>NaN非純數(shù)字字符串Math對(duì)象演示(math.html)Math對(duì)象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純數(shù)字字符串console.log(Math.round('2.7a'));//=>NaN非純數(shù)字字符串console.log(Math.sqrt(9));//=>3console.log(Math.sqrt('b'));//=>NaNMath對(duì)象演示(math.html)Math對(duì)象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>隨機(jī)生成顏色(mathColor.html)BOM對(duì)象6BOM是指BrowserObjectModel（瀏覽器對(duì)象模型），瀏覽器對(duì)象模型提供了可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象，BOM由多個(gè)對(duì)象構(gòu)成，其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象，其他對(duì)象都是該對(duì)象的子對(duì)象。BOM常用的一些對(duì)象有：window對(duì)象document對(duì)象location對(duì)象navigator對(duì)象screen對(duì)象BOM對(duì)象6location對(duì)象演示(location.html)<button>打開(kāi)百度</button><scripttype="text/javascript"> document.querySelector("button").onclick=function(){ window.location.href=""; }</script>BOM對(duì)象6navigator對(duì)象演示(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對(duì)象6screen對(duì)象演示(screen.html)document.writeln('總高度:'+screen.height+'<br>’);document.writeln('總寬度:'+screen.width+'<br>’);document.writeln('不包括任務(wù)欄的高度:'+screen.availHeight+'<br>’);document.writeln('不包括任務(wù)欄的寬度:'+screen.availWidth+'<br>’);document.writeln('屏幕的顏色分辨率:'+screen.pixelDepth);BOM對(duì)象6history對(duì)象演示(history.html)<button>前進(jìn)</button><scripttype="text/javascript"> document.querySelector("button").onclick=function(){ history.go(1); history.back(); history.forward(); }</script>完成本章綜合案例案例實(shí)現(xiàn)貳設(shè)計(jì)思路1實(shí)現(xiàn)表單驗(yàn)證的方式：H5的新屬性支持表單驗(yàn)證；使用JS可以實(shí)現(xiàn)，使用JS也有兩種方式：一是使用正則表達(dá)式驗(yàn)證；二是使用其他一些對(duì)字符串的操作方法來(lái)實(shí)現(xiàn)使用jquery或者其他框架也可以實(shí)現(xiàn)實(shí)現(xiàn)步驟--設(shè)計(jì)頁(yè)面架構(gòu)2本案例表單中包含六個(gè)表單元素驗(yàn)證：字符串格式、電話格式、年齡格式、電子郵箱格式、身份證號(hào)格式日期格式；這些驗(yàn)證包括了平常使用場(chǎng)景中的大部分要求實(shí)現(xiàn)步驟--設(shè)計(jì)頁(yè)面架構(gòu)2<formaction="#"method="get"><h3>聯(lián)系人</h3><divclass="items"><div> <spanclass="label">姓名：</span> <inputname="name"placeholder="以字母開(kāi)頭,長(zhǎng)度為4-8位"autocomplete="off"></div><div> <spanclass="label">電話：</span> <inputname="phone"placeholder="固話或手機(jī)"autocomplete="off"></div><div> <spanclass="label">年齡：</span> <inputname="age"placeholder="年齡區(qū)間：18-38"autocomplete="off"></div><div> <spanclass="label">電子郵箱：</span> <inputname="email"autocomplete="off"></div>實(shí)現(xiàn)步驟--設(shè)計(jì)頁(yè)面架構(gòu)2 <spanclass="label">電子郵箱：</span> <inputname="email"autocomplete="off"></div><div> <spanclass="label">身份證號(hào)：</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>實(shí)現(xiàn)步驟--美化元素2*{box-sizing:border-box;}form{ width:80%; box-shadow:02px3px2px#ddd; margin:auto;}整體上來(lái)說(shuō)表單占據(jù)瀏覽器窗口的大部分空格，但是又不鋪滿，整體是水平居中效果，其樣式代碼如下：實(shí)現(xiàn)步驟--美化元素2h3{ padding:5px20px; border-bottom:1pxsolid#ddd; background:url(images/edit.png)no-repeat; background-size:12px18px; background-position:5px9px;}表單的標(biāo)題顯示在表單的左上角位置、加粗且有一個(gè)小圖標(biāo)顯示，代碼如下：實(shí)現(xiàn)步驟--美化元素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;}本案例采用自適應(yīng)效果，在大尺寸顯示時(shí)一行顯示兩個(gè)表單元素，每個(gè)表單的標(biāo)簽文字右對(duì)齊；小尺寸顯示時(shí)一行顯示一個(gè)表單元素，代碼如下：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; }}實(shí)現(xiàn)步驟--美化元素2div.save{ padding:20px; text-align:center;}div.savebutton{ background:#ddd; padding:10px30px; border:none; cursor:pointer; color:#fff;}div.savebutton:hover{ background:#0099FF;}提交按鈕默認(rèn)灰色背景色，鼠標(biāo)懸停時(shí)為淺藍(lán)色背景色，代碼如下：實(shí)現(xiàn)步驟--美化元素2input.pass{ background:linear-gradient(toright,#009933,#00FF99)!important;}input.error{ background:linear-gradient(toright,red,#FF9966)!important;}input{outline:none;}表單元素默認(rèn)沒(méi)有輸入焦點(diǎn)框，驗(yàn)證通過(guò)的元素背景色為綠色漸變色，驗(yàn)證失敗的元素背景色為紅色漸變背景色，代碼如下：實(shí)現(xiàn)步驟--美化元素2圖6-3小屏幕時(shí)的效果圖實(shí)現(xiàn)步驟--美化元素2圖6-4大屏幕時(shí)的效果圖實(shí)現(xiàn)步驟--獲取所有需要操作的元素2因?yàn)樵诙鄠€(gè)方法中都要對(duì)表單元素進(jìn)行操作，所以提前獲取這些元素。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]');實(shí)現(xiàn)步驟--表單元素獲得焦點(diǎn)2每個(gè)表單元素獲得焦點(diǎn)時(shí)自動(dòng)選擇全部?jī)?nèi)容，這樣有利于修改它的值，提升用戶體驗(yàn)。其代碼如下：//獲得焦點(diǎn)userName.onfocus=inputFocus;userPhone.onfocus=inputFocus;userAge.onfocus=inputFocus;userMail.onfocus=inputFocus;userId.onfocus=inputFocus;userDate.onfocus=inputFocus;

functioninputFocus(){ //自動(dòng)獲得焦點(diǎn)，并選中所有文本

this.focus(); this.selectionStart=0; this.selectionEnd=this.value.length;}實(shí)現(xiàn)步驟--各表單元素失去焦點(diǎn)2//用戶名失去焦點(diǎn)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";}各表單元素失去焦點(diǎn)時(shí)，使用正則表達(dá)式對(duì)輸入的內(nèi)容進(jìn)行驗(yàn)證，驗(yàn)證通過(guò)的背景色變?yōu)榫G色漸變效果，驗(yàn)證失敗的背景色變?yōu)榧t色漸變效果，形成鮮明的對(duì)比，讓用戶對(duì)驗(yàn)證結(jié)果一目了然。代碼如下：實(shí)現(xiàn)步驟--各表單元素失去焦點(diǎn)2//電話號(hào)碼失去焦點(diǎn)userPhone.onblur=function(e){ //電話0538-12345678 //手機(jī):11位，且指定號(hào)段

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";}實(shí)現(xiàn)步驟--各表單元素失去焦點(diǎn)2//年齡失去焦點(diǎn)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";}實(shí)現(xiàn)步驟--各表單元素失去焦點(diǎn)2//電子郵箱失去焦點(diǎn)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";}實(shí)現(xiàn)步驟--各表單元素失去焦點(diǎn)2//身份證號(hào)失去焦點(diǎn)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. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論