這篇文章主要介紹php如何實(shí)現(xiàn)用戶(hù)注冊(cè)頁(yè)面填寫(xiě)信息，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)主打移動(dòng)網(wǎng)站、網(wǎng)站建設(shè)、做網(wǎng)站、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名注冊(cè)、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻?hù)承諾穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

注冊(cè)頁(yè)面是大多數(shù)網(wǎng)站必備的頁(yè)面，所以很有必要對(duì)自己的注冊(cè)頁(yè)面做些精心的設(shè)計(jì)。下面三張圖，第一張是注冊(cè)的展示頁(yè)面，第二張思維導(dǎo)圖就一個(gè)簡(jiǎn)單的邏輯，第三張是通過(guò)firebug查看調(diào)用的JS文件。

一、給每個(gè)輸入框?qū)懴抡f(shuō)明

在用戶(hù)看到這個(gè)輸入框的時(shí)候，就能非常清晰的明白這個(gè)輸入框是做啥用的，較大限度的降低他們產(chǎn)生疑惑的可能性。我們需要假設(shè)用戶(hù)毫不了解注冊(cè)需要輸入的內(nèi)容，隨后給他們足夠的信息以便幫助他們理解。

 二、小圖標(biāo)icon

Icon是增強(qiáng)內(nèi)容的工具，而且能給訪(fǎng)客一個(gè)很好的暗示。以前使用小圖標(biāo)都是用圖片，用圖片的話(huà)，很多時(shí)候那些對(duì)齊、寬度高度搞起來(lái)特麻煩，這次我將圖標(biāo)做成字體，操作字體可比操作圖片容易很多。可以到國(guó)外的一個(gè)網(wǎng)站icomoon制作圖標(biāo)字體，不過(guò)這個(gè)網(wǎng)站打開(kāi)起來(lái)比較慢，需要耐心等待。利用在線(xiàn)資源，接受新思想與新技術(shù)，讓工作變得越來(lái)越簡(jiǎn)單。

這些小圖標(biāo)都是從icomoon網(wǎng)站上面導(dǎo)出的。這種方式操作對(duì)齊，大小非常方便，不過(guò)IE6和IE7不支持選擇器before（關(guān)于選擇器的瀏覽器兼容可以參考這里），所以在這兩個(gè)瀏覽器中將不能顯示這個(gè)圖標(biāo)。

<font class="ficomoon icon-signup"></font>注冊(cè)新用戶(hù)
@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot?-fl11l');
 src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff?-fl11l') format('woff'),
 url('fonts/icomoon.ttf?-fl11l') format('truetype'),
 url('fonts/icomoon.svg?-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-print:before {content: "\e601"}

 三、輸入框還可輸入的字符數(shù)

過(guò)去我會(huì)給輸入框設(shè)置一個(gè)較大字?jǐn)?shù)的屬性限制，這是一種比較粗暴的方式，因?yàn)樵谳斎氲揭欢ㄗ址螅蝗徊荒茌斎肓耍杏X(jué)就像是鍵盤(pán)一下子失靈了，沒(méi)有任何征兆。

現(xiàn)在通過(guò)這個(gè)設(shè)置，首先能讓用戶(hù)知道這里有字?jǐn)?shù)限制，其次能夠讓用戶(hù)清楚的知道何時(shí)會(huì)達(dá)到這個(gè)限制，很好的提升了友好度。這里面還做了另外一個(gè)小操作，就是在輸入到一些字符后，將出現(xiàn)變紅色，警示用戶(hù)馬上要超過(guò)額定字?jǐn)?shù)了。

這是一種poka-yoke的概念，意思就是防止錯(cuò)誤，有兩種含義：偵測(cè)機(jī)制與預(yù)防機(jī)制。

加入簡(jiǎn)單的字符計(jì)數(shù)器便能把一個(gè)潛在的錯(cuò)誤轉(zhuǎn)變成另一個(gè)“原來(lái)使用這個(gè)產(chǎn)品只需常識(shí)”的瞬間。

function _textLimit(options, value) {
 var length = value.length;
 var color = options.normal;
 var remind = options.len - length;
 if(remind > 0 && remind <= options.limit) {
 color = options.warnning;
 }
 if(remind < 0) {
 var txt = $('#' + options.inputId);
 txt.val(value.substr(0, options.len));
 remind = 0;
 }
 
 $('#' + options.digitalId).html(remind).css({"color": color, "font-size": options.fontSize});
 }

四、輸入正確與錯(cuò)誤都給予反饋

除了檢測(cè)到錯(cuò)誤時(shí)立即顯示友好的提示信息之外，告訴用戶(hù)“一切都沒(méi)有問(wèn)題”同樣也很重要。

設(shè)想一下，當(dāng)你急切的在向某人詢(xún)問(wèn)一些信息的時(shí)候，肯定是希望能馬上得到響應(yīng)的回答。

當(dāng)用戶(hù)輸入正確的時(shí)候，就應(yīng)該表示表示，給他們一個(gè)綠色的勾，鼓勵(lì)一下；當(dāng)輸入錯(cuò)誤的時(shí)候，給他們一個(gè)紅色的差，告訴他們錯(cuò)誤的理由，讓他們做相應(yīng)的修改。這里的勾和差我都是使用的圖標(biāo)字體，對(duì)齊的時(shí)候特別方便。

.ico_correct{color:#01b60e;margin-left:10px;font-family:'icomoon';vertical-align:middle;font-size:1.25em}
.ico_correct:before {content: "\f00c"}
.ico_error{color:#ff0000;margin-left:10px;font-family:'icomoon';vertical-align:middle;font-size:1.25em}
.ico_error:before {content: "\f00d"}

五、郵箱做自動(dòng)匹配

這種郵箱自動(dòng)化匹配，既能減少用戶(hù)的輸入錯(cuò)誤，也能提高用戶(hù)輸入的效率。讓用戶(hù)是在“做正確的事”。下拉列表中的紅色能夠凸顯出匹配值與輸入值的區(qū)別，便于識(shí)別。

從網(wǎng)上查到了相關(guān)的JS腳本代碼，自己再做了一點(diǎn)小修改，集成到我的代碼中。這里小編還有一篇超全的郵箱自動(dòng)化匹配的文章分享給大家：《jquery實(shí)現(xiàn)郵箱自動(dòng)填充提示功能》

 

六、密碼強(qiáng)度

密碼強(qiáng)度檢測(cè)是為了給用戶(hù)一個(gè)善意的提醒，希望用戶(hù)對(duì)自己信息有更強(qiáng)的保護(hù)心理。所以即使密碼為弱，也不應(yīng)該影響數(shù)據(jù)提交。三種等級(jí)在下面會(huì)顯示不同的提示語(yǔ)，會(huì)提示用戶(hù)增加密碼強(qiáng)度，或鼓勵(lì)用戶(hù)將密碼強(qiáng)度更進(jìn)一步，或肯定這個(gè)密碼的強(qiáng)度。

密碼強(qiáng)度在網(wǎng)上有很多插件，但是這次我自己寫(xiě)CSS，然后自己做匹配強(qiáng)度，這樣做是為了能更好的集成到我的網(wǎng)站頁(yè)面中。不同強(qiáng)度顯示不同的顏色塊與提示。

regex.checkPwdStrong = function(str) {//密碼強(qiáng)度是否為強(qiáng)
 var rule = /^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$/g;
 return rule.test(str);
};
regex.checkPwdMedium = function(str) {//密碼強(qiáng)度是否為中等
 var rule = /^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$/g;
 return rule.test(str);
};
regex.checkPwdPoor = function(str) {//密碼強(qiáng)度是否為弱
 var rule = /(?=.{6,}).*/g;
 return rule.test(str);
};

.pwd_complex{padding:5px 0;height:15px}
.pwd_complex span{height:6px;width:80px;margin-right:5px;display:inline-block;border:1px solid #c2c2c2;overflow:hidden}
.pwd_complex .strong{border:1px solid #45ac07;background:#61cc1f}
.pwd_complex .strong_word{color:#45ac07}
.pwd_complex .medium{border:1px solid #45ac07;background:#9AF518}
.pwd_complex .medium_word{color:#61cc1f}
.pwd_complex .poor{border:1px solid #FF9C3A;background:#FFCA92}
.pwd_complex .poor_word{color:#FF9C3A}

這里小編再給大家推薦一篇超全的郵箱密碼強(qiáng)度驗(yàn)證的的文章分享給大家：《jquery判斷密碼強(qiáng)度的驗(yàn)證代碼》

七、控制注冊(cè)按鈕

選中與不選中我本來(lái)做的是另外一個(gè)效果，就是沒(méi)選中的時(shí)候?qū)ⅠR上注冊(cè)這個(gè)按鈕隱藏掉，但后面覺(jué)得不妥，如果用戶(hù)不小心將選中框取消，按鈕又突然消失了，會(huì)使用戶(hù)疑惑，有可能他們就終止注冊(cè)或者刷新頁(yè)面，重新輸入相應(yīng)的內(nèi)容，無(wú)論做哪種操作，都會(huì)讓用戶(hù)感到不愉快。

后面我就想到將按鈕變灰，在html中被禁用的 input 默認(rèn)顯示灰色，利用了一下用戶(hù)的一些習(xí)慣。讓按鈕存在于頁(yè)面上，暗示用戶(hù)還有操作沒(méi)完成，這里其實(shí)倒是可以再加些小提示，明確哪里沒(méi)有做好，我偷懶了下沒(méi)有做那種提示。

服務(wù)條款下面我用虛線(xiàn)標(biāo)識(shí)了一下，并且在移上去的時(shí)候顯示手的圖標(biāo)，暗示用戶(hù)這里可以點(diǎn)擊，點(diǎn)擊服務(wù)條款彈出一個(gè)內(nèi)容層，里面是協(xié)議內(nèi)容，我沒(méi)有做打開(kāi)一張新頁(yè)面那種提醒方式，我覺(jué)得這種時(shí)候用戶(hù)的注意力應(yīng)該集中在當(dāng)前頁(yè)面，而不是新開(kāi)一個(gè)窗口，再去瀏覽那里的信息，分散了他的注意力，還有就是新開(kāi)了一個(gè)窗口瀏覽器又多了個(gè)標(biāo)簽，挺占地方的。

 八、最后驗(yàn)證

當(dāng)我點(diǎn)擊提交按鈕的時(shí)候，會(huì)用JS腳本做最后的驗(yàn)證，防止將錯(cuò)誤信息提交到服務(wù)器端，如果有輸入還沒(méi)符合要求，會(huì)有一個(gè)小手定位到錯(cuò)誤的輸入框旁邊，并做了來(lái)回移動(dòng)的動(dòng)畫(huà)效果。一個(gè)會(huì)動(dòng)的錯(cuò)誤提示，我相信能更加吸引住用戶(hù)的注意，然后做相應(yīng)修改。這里使用了CSS3的新技術(shù)，一直想把一些已經(jīng)學(xué)到了的東西應(yīng)用到實(shí)際操作中，這里正好做了個(gè)嘗試。這個(gè)動(dòng)畫(huà)提示還很粗糙，但給了我一個(gè)新的想法。覺(jué)得變復(fù)雜的就是CSS代碼一下子龐大了很多。

這個(gè)動(dòng)畫(huà)就是在控制margin-left的值，做來(lái)回移動(dòng)。

.cssanimations .ico_prompt{
 -moz-animation-duration: .7s;
 -moz-animation-name: prompt_hand;
 -moz-animation-iteration-count: infinite;
 -moz-animation-direction: alternate;
 
 -webkit-animation-duration: .7s;
 -webkit-animation-name: prompt_hand;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 
 -o-animation-duration: .7s;
 -o-animation-name: prompt_hand;
 -o-animation-iteration-count: infinite;
 -o-animation-direction: alternate;
 
 -ms-animation-duration: .7s;
 -ms-animation-name: prompt_hand;
 -ms-animation-iteration-count: infinite;
 -ms-animation-direction: alternate;
 
 animation-duration: .7s;
 animation-name: prompt_hand;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}
@keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}
@-moz-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}
@-webkit-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}
@-o-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
@-ms-keyframes prompt_hand {
 from {margin-left:10px}
 to {margin-left:2px}
}

九、按鈕標(biāo)記

按鈕里面的文字我可以寫(xiě)成普通的“提交”字樣，也能正常工作。但是意義更明顯的按鈕標(biāo)記能更好地幫助用戶(hù)建立對(duì)點(diǎn)擊結(jié)果的期望，讓用戶(hù)清楚的知道我在這里用手指點(diǎn)擊了一下，能得到什么結(jié)果。

 

十、做防重復(fù)提交限制

最后在用戶(hù)點(diǎn)擊提交后，我會(huì)有一個(gè)轉(zhuǎn)動(dòng)的圓圈出現(xiàn)，既能暗示用戶(hù)系統(tǒng)正在提交，請(qǐng)耐心等待，又能防止用戶(hù)重復(fù)提交服務(wù)器。一般有經(jīng)驗(yàn)的用戶(hù)看到這種圈圈就會(huì)意識(shí)到正在提交中，但對(duì)于沒(méi)經(jīng)驗(yàn)的用戶(hù)，可以做到更好。我僅僅是做了個(gè)圈圈層特效，其實(shí)這里的“馬上注冊(cè)”幾個(gè)字可以在點(diǎn)擊后改變成“注冊(cè)提交中”等提示，讓用戶(hù)能更加清晰的知道現(xiàn)在是什么情況。

為了完成這種效果，我使用了插件spin，能夠兼容各個(gè)瀏覽器。在ajax做提交前顯示，在ajax響應(yīng)后去除這個(gè)等待層。

showAjaxLoading: function(btn) {
 var left = $(btn).offset().left;
 var top = $(btn).offset().top;
 var width = $(btn).width();
 var height = $(btn).height();
 var opts = {
 lines: 9, // The number of lines to draw
 length: 0, // The length of each line
 width: 10, // The line thickness
 radius: 15, // The radius of the inner circle
 corners: 1, // Corner roundness (0..1)
 rotate: 0, // The rotation offset
 direction: 1, // 1: clockwise, -1: counterclockwise
 color: '#000', // #rgb or #rrggbb or array of colors
 speed: 1, // Rounds per second
 trail: 81, // Afterglow percentage
 shadow: false, // Whether to render a shadow
 hwaccel: false, // Whether to use hardware acceleration
 className: 'spinner', // The CSS class to assign to the spinner
 zIndex: 2e9, // The z-index (defaults to 2000000000)
 top: '50%', // Top position relative to parent
 left: '50%' // Left position relative to parent
 };
 $('#ajax_spin').remove();
 $('body').append('<div id="ajax_spin" ><div id="ajax_spin_inner" ></div></div>');
 $('#ajax_spin').css({'top':top, 'left': left, 'width': width, 'height':height});
 var target = document.getElementById('ajax_spin_inner'); 
 var spinner = new Spinner(opts).spin(target);
 }

這個(gè)注冊(cè)頁(yè)面是我的一個(gè)初步的思路，以后有新的體會(huì)后，將會(huì)不斷的做修改。

上面的這些步驟在某些情況下可能不是好的解決方案，所以在實(shí)際情況中最相應(yīng)的修改。沒(méi)有好，只有更好。

我想做到的一個(gè)目標(biāo)是，當(dāng)用戶(hù)進(jìn)入到這個(gè)頁(yè)面后，能非常輕松的完成各個(gè)輸入框，非常舒服流暢的完成各個(gè)框。

以上是“php如何實(shí)現(xiàn)用戶(hù)注冊(cè)頁(yè)面填寫(xiě)信息”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱(chēng)：php如何實(shí)現(xiàn)用戶(hù)注冊(cè)頁(yè)面填寫(xiě)信息-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://www.chinadenli.net/article44/iehhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開(kāi)發(fā)、域名注冊(cè)、App設(shè)計(jì)、ChatGPT、全網(wǎng)營(yíng)銷(xiāo)推廣、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)