整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
小白，知道怎么制作登陸模塊么？”
“大概能想明白，簡單的登陸主要是用戶名、密碼兩個輸入框，復(fù)雜點的可能會加上驗證碼和手機驗證。用戶填寫好信息以后，點擊確定后把用戶輸入的信息通過POST方式發(fā)送給做登陸處理的PHP頁面。做登陸處理的PHP頁面判斷如果用戶名密碼正確，則返回登陸正確的JSON字符串，如果用戶名密碼錯誤則返回對應(yīng)的錯誤信息JSON字符串。”
“嗯，基本沒有問題，不過有一個情況你沒有考慮。”
“什么情況？”，小白不解的問。
“假如用戶輸入的用戶名為空或者長度不符合要求，還有沒有必要向PHP頁面發(fā)送登陸驗證？”
“哦！我知道了，沒必要！不符合要求的數(shù)據(jù)發(fā)送到后臺PHP頁面進行判斷肯定是登陸不了的，所以需要提前通過JavaScript進行判斷，如果填寫的格式不對，可以通過JavaScript提示用戶哪里有問題，等用戶信息填寫正確后再向PHP發(fā)送登陸驗證的請求，這樣不但用戶體驗好服務(wù)器壓力也小。”
老朱說：“說的不錯，那你現(xiàn)在布局一個簡單的用戶登錄，然后咱試著做個驗證判斷。”
小白用了幾分鐘就做完了，跟老朱說道：“布局做好了，我們現(xiàn)在應(yīng)該怎么做呢？”
“我們現(xiàn)在只判斷用戶名和密碼的長度，用戶名最短長度是2，密碼最短長度是6。之前定義對象的方法還記得吧？你現(xiàn)在試著定義一個對象，并讓這個對象包含判斷判斷用戶名和密碼的方法。”
“這個感覺沒什么頭緒啊，給我1個小時的時間可以么？”
“沒問題，我相信你！一定要用對象來做啊，不要用函數(shù)。”
“朱哥，做好了，你看看我寫的這個有什么問題么？”
老朱仔細看了小白寫的代碼后，非常高興，說道：“小白！我現(xiàn)在已經(jīng)對你刮目相看了，看來你這幾天沒少做JS對象的練習(xí)啊！我非常欣賞你這里每個方法中最后的return this用法。通過這個方法就可以通過鏈?zhǔn)椒椒ㄊ褂脤ο罄锩娴母鱾€方法了，你還給checkOBJ對象設(shè)定了一個ispass屬性來判斷是否驗證通過，真的很不錯。”
小白聽了以后，內(nèi)心相當(dāng)?shù)母吲d，說道：“這幾天晚上沒事我都會看看JS的一些基礎(chǔ)知識介紹，正好最近好好研究了一下return的用法。不過我這里用alert提醒用戶是不是用戶體驗很不好啊！”
“沒關(guān)系的，小白！我們今天主要還是熟悉對象的操作，你已經(jīng)把JS對象的使用方法又提高了一層，看來不用幾天我們就可以學(xué)習(xí)JS模擬類的操作了。”
“嗯，我也很期待繼續(xù)提高呢~”
“小白，今天我們做的用戶登錄驗證還有很多需要完善的地方，比如提示用戶的時候能不能直接把焦點定位到有問題的文本框，能不能不用alert而使用昨天我們說到的彈層等等。前端用戶體驗是非常重要的，這一點我們一定不能忽視，所以我還是希望你今天能夠繼續(xù)把用戶登錄驗證完善完善，也當(dāng)是做一個練習(xí)。”
老朱準(zhǔn)備走的時候回頭又跟小白說了一句：“噢！對了，今天為什么要用一個對象來做判定而不是用幾個函數(shù)判定，這個你也好好考慮考慮！”
想學(xué)H5的朋友可以關(guān)注老爐，您的關(guān)注是我持續(xù)更新《小白HTML5成長之路》的動力！
html5 中，在增加了大量的表單元素與屬性的同時，也增加了大量在提交時對表單與表單內(nèi)新增元素進行內(nèi)容有效性驗證的功能，接下來我們來說1下自動驗證。
在html5中，通過對元素使用屬性的方法，可以實現(xiàn)在表單提交時履行自動驗證的功能，在履行代碼后，將在表單提交時自動驗證輸入的內(nèi)容是不是為數(shù)字，如果驗證通不過，將顯示毛病信息文字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
<input type="text" name="text" required pattern="^\w.*$">
<input type="submit" value="提交">
</form>
</body>
</html>
接下來我們來看1下在html5 中追加的關(guān)于對元素內(nèi)輸入內(nèi)容進行限制的屬性的指定。
1.required屬性
html5 中新增的required屬性可以利用在大多數(shù)輸入元素上（除隱藏元素，圖片元素按鈕上）。在提交時，如果元素中內(nèi)容為空白。則不允許提交，同時在閱讀器中顯示信息提示文字，提示用戶這個元素中必須輸入內(nèi)容，效果如圖
2.pattern屬性之條件到的新增的input元素，比如email，number，URL等，要求輸入內(nèi)容符合1定的格式，對input元素使用pattern屬性，并且將屬性值設(shè)置為某個格式的正則表達式，在提交時會檢查其內(nèi)容是不是符合給定格式。當(dāng)輸入的內(nèi)容不符合給定格式時，則不允許提交，同時在閱讀器中顯示信息提示文字，提交輸入的內(nèi)容必須符合給定格式，代碼以下，要求輸入內(nèi)容為1個數(shù)字與3個大寫字母：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入指定內(nèi)容:<input pattern="[0⑼][A-Z]{3}" name="part" placeholder="輸入:1個數(shù)字3個大寫字母">
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
3.min屬性與max屬性
min與max這兩個屬性是日期類型或數(shù)值類型的input元素的專用屬性，他們限制了在input元素中輸入的數(shù)值與日期的范圍。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="post">
請輸入數(shù)值:<input type="number" name="point" min="0" max="100" />
<input type="submit" value="提交">
</form>
</body>
</html>履行效果以下：
4.step屬性
step屬性控制input元素中的值增加過減少時的步驟。例如當(dāng)你想讓用戶輸入的值在0與100之間，但必須是5的倍數(shù)時，你可以指定step為5，代碼以下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<title>表單驗證示例</title>
</head>
<body>
<form action="#" method="get">
<input type="number" name="point" step="5" />
<input type="submit" />
</form>
</body>
</html>
效果以下：
原文：http://www.wfuyu.com/htmlcss/27520.html
TML5多媒體作品以其對各種平臺的兼容而見長，目前已獲得了廣泛的應(yīng)用。如果我們需要制作自己的HTML5多媒體作品，一個方便之選就是利用現(xiàn)成的在線制作工具“百度H5”。
首先訪問“百度H5”網(wǎng)頁（https://h5.baidu.com/），可以看到非常簡單的頁面，僅有“我的H5”和“我的模板”兩個選項。其中“我的模板”是通過套用模板的方式來制作HTML5作品，而“我的H5”則可以完全靠自定義各種參數(shù)來自由創(chuàng)作，制作好的作品也會顯示在這里（圖1）。
1. 通過創(chuàng)意模板輕松制作
在首頁中選擇“我的模板”，隨后會進入一個模板展示頁面，這些都是設(shè)計者們分享的模板。根據(jù)你所要設(shè)計的作品的類別，可以按類選擇一個類似的作品作為制作的模板，然后在此基礎(chǔ)上進行修改，即可快速形成自己的多媒體作品（圖2）。
比如要制作一個招生方面的媒體作品，選擇如圖所示的秋季班招生模板，然后點擊右下角的“使用模板”按鈕（圖3）。
接下來先要為作品命名，例如“我們的幼兒園招生了”。輸入完畢點擊“確定”按鈕（圖4）。
隨后進入實質(zhì)性的模板修改編輯階段。對于不合適的內(nèi)容，可先刪除頁面元素再添加。點擊“文本”菜單插入所需文本內(nèi)容。同理，可使用右邊的“媒體”按鈕插入圖片、音頻、視頻、嵌入視頻、全景圖等內(nèi)容。如果是PSD圖片，則直接用PSD菜單載入。若版面中需要插入一些圖標(biāo)或形狀，則點擊“圖形”菜單選擇添加（圖5）。
此外，對于作品中所要用到的展示數(shù)據(jù)，可以通過插入圖表、表單等方式，非常輕松地完成數(shù)據(jù)展示制作（圖6）。如果要實現(xiàn)更多的效果，可通過“插件”菜單，選擇添加頁面加載套件和加載進度、添加計數(shù)器、添加幀動畫、添加相冊或地圖等。
對于需要修改的屬性，可通過窗口右側(cè)的分類屬性窗口選擇設(shè)置。通過窗口下方的編輯區(qū)域，可控制動畫、加載頁、全局全景和背景、當(dāng)前頁等參數(shù)設(shè)置。例如，要定制個性化的加載頁面效果，點擊“加載頁”選項卡，然后通過下方的滑塊，對加載頁中的圖片和進度進行自定義編輯（圖7）。
對頁面上的各種元素進行修改和編輯完成之后，點擊工具欄左上角的磁盤按鈕將作品保存在網(wǎng)上。注意，編輯過程中產(chǎn)生的內(nèi)容軟件會自動保存，但為了防止丟失，還是要養(yǎng)成勤于手動保存的習(xí)慣。
最后，就可以發(fā)布作品了。點擊工具欄上的“發(fā)布”按鈕執(zhí)行發(fā)布操作（圖8）。
由于作品是保存在網(wǎng)絡(luò)服務(wù)器中的，因此作品的共享是以網(wǎng)址的形式體現(xiàn)的。發(fā)布時要填寫作品分享的標(biāo)題，設(shè)置個人域名。我們只需在“個性化域名”中填寫自己命名的作品個性域名地址，發(fā)布后其他人就可以用這個域名來訪問HTML5作品了（圖9）。
小提示：使用上述服務(wù)需要使用自己的百度賬號登錄。為維護網(wǎng)絡(luò)安全，目前發(fā)布信息需先經(jīng)過用戶實名制認證方可進行。
2. DIY 完全自己設(shè)計制作
套用模板適合于初學(xué)者或設(shè)計能力不強的用戶。其實，不用套用模板，完全可以從頭全部由自己來設(shè)計作品。
制作時，在主頁中選擇“我的H5”，然后點擊空白頁上印有圓圈套加號圖標(biāo)的按鈕，向?qū)儐杽?chuàng)建什么樣的布局。從“分頁布局”或“整頁布局”中選擇一種布局方式。如果是分頁布局，則依靠頁面間的前后滑動實現(xiàn)簡單跳轉(zhuǎn)；如果是整頁布局，則將整個頁面分為不同區(qū)域，各部分還可創(chuàng)建鏈接，實現(xiàn)不同的功能（圖10）。
隨后其他步驟與第1部分的添加和設(shè)置操作方法相當(dāng)，只是全要親自設(shè)計，不能套用現(xiàn)成的組件而已。在創(chuàng)作過程中，只要善于使用系統(tǒng)提供的文本工具編排文字內(nèi)容，用媒體和圖形工具添加圖片、圖形、音視頻，數(shù)據(jù)相關(guān)的內(nèi)容使用圖表、表單等工具，借助于“插件”擴展來補充完善，發(fā)揮自由想象的創(chuàng)作空間，一定能創(chuàng)作出更具個性化的作品。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
