前言
最近有很多小伙伴問(wèn)到榆综，百度賬戶(hù)注冊(cè)時(shí)用戶(hù)名是如何進(jìn)行校驗(yàn)的糠爬，用戶(hù)名的正則表達(dá)式是如何定義的楣号，針對(duì)小伙伴的問(wèn)題叼耙，讓我們一起來(lái)揭開(kāi)那神秘的面紗...
謀定而后動(dòng)
古人云：謀定而后動(dòng)腕窥。我們先來(lái)觀察百度賬戶(hù)注冊(cè)時(shí)的場(chǎng)景，關(guān)于用戶(hù)名的場(chǎng)景有一下幾個(gè)：
-
默認(rèn)情況顯示：
用戶(hù)名默認(rèn)情況.png -
用戶(hù)名中出現(xiàn)特殊字符
用戶(hù)名特殊字符.png -
用戶(hù)名中純數(shù)字
用戶(hù)名純數(shù)字.png -
用戶(hù)名長(zhǎng)度
用戶(hù)名長(zhǎng)度.png -
判斷賬戶(hù)名是否可用
此規(guī)則不再此次討論范圍內(nèi)筛婉，判斷賬戶(hù)名是否可用簇爆，應(yīng)結(jié)合Ajax向后臺(tái)服務(wù)器發(fā)送數(shù)據(jù)驗(yàn)證
由觀察可得，百度賬戶(hù)注冊(cè)時(shí)用戶(hù)名的規(guī)則：
- 用戶(hù)名由中英文字符爽撒、下劃線(xiàn)入蛆、數(shù)字組成，不能為純數(shù)字
- 用戶(hù)名的長(zhǎng)度不能超過(guò)7個(gè)漢字或14個(gè)英文字符
動(dòng)起來(lái)...
很多小伙伴在遇到用戶(hù)名注冊(cè)開(kāi)發(fā)時(shí)硕勿，都會(huì)想到正則表達(dá)式哨毁，都在考慮如果通過(guò)一個(gè)正則表達(dá)式來(lái)完成所有的約束。很多情況下都是OK的源武，但是在這里想通過(guò)一個(gè)正則表達(dá)式來(lái)完成所有的約束條件是非常有困難滴扼褪！(如果有哪位小伙伴，有一個(gè)正則表達(dá)式完成所有的需求粱栖，可留言評(píng)論话浇、探討...)
那對(duì)于百度注冊(cè)用戶(hù)名這個(gè)情況，我們需要如何去實(shí)現(xiàn)呢闹究，小伙伴不要擔(dān)心幔崖。就像追女朋友一樣，直接上搞不定渣淤，那就迂回一下嘍...
分解要求
對(duì)于百度賬戶(hù)注冊(cè)的用戶(hù)名規(guī)則赏寇，我們進(jìn)行要求分解：
- 判斷用戶(hù)名是否為空
- 判斷用戶(hù)名中是否包含非法字符(除了中英文、數(shù)字砂代、下劃線(xiàn)以外的字符)
- 判斷用戶(hù)名是純數(shù)字(也就是除了數(shù)字以外是否還有其他字符)
- 判斷用戶(hù)名的長(zhǎng)度(遍歷整個(gè)用戶(hù)名字符串蹋订，是中文長(zhǎng)度+2，否則長(zhǎng)度+1)
聰明的小伙伴刻伊，看到這里是否你已經(jīng)明白了呢...
代碼實(shí)現(xiàn)
一切從簡(jiǎn)露戒，重在理論
HTML部分
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>百度賬戶(hù)用戶(hù)名注冊(cè)規(guī)則詳解</title>
<style>
/* 描述用戶(hù)名注冊(cè)的提示信息 */
.tipMsg{
color: #333;
}
/* 錯(cuò)誤提示信息樣式 */
.error{
color: #F00;
}
/* 成功提示信息樣式 */
.success{
color: #0F0;
}
</style>
</head>
<body>
<form action="" id="reg">
用戶(hù)名：<input type="text" name="username" id="username"><span class="tipMsg"></span><br><br>
<input type="submit" value="注冊(cè)">
</form>
</body>
</html>
JS邏輯部分
<script>
// 獲取元素
var username = document.getElementById('username');
var reg = document.getElementById('reg');
// 設(shè)置用戶(hù)名是否滿(mǎn)足條件的標(biāo)志 false 表示沒(méi)有通過(guò)，true表示通過(guò)
var isUsernameOk = false;
// 設(shè)置表單的提交事件捶箱，根據(jù)條件是否允許提交
reg.onsubmit = function () {
if (!isUsernameOk) {
// 取消表單的默認(rèn)事件,終止執(zhí)行
return false;
}
}
// 獲取焦點(diǎn)智什，設(shè)置提示信息
username.onfocus = function () {
// 設(shè)置提示信息span的類(lèi)名和信息
var span = this.nextElementSibling;
span.className = 'tipMsg';
span.innerHTML = '設(shè)置后不可更改<br>中英文均可，最長(zhǎng)14個(gè)英文或7個(gè)漢字';
}
// 失去焦點(diǎn)丁屎，判斷是否滿(mǎn)足條件
username.onblur = function () {
// 去除多余的空白字符
var uname = this.value.trim();
// 判斷是否為空
if (uname == '') {
// 設(shè)置錯(cuò)誤信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用戶(hù)名不允許為空';
// 設(shè)置用戶(hù)名標(biāo)記為false
isUsernameOk = false;
// 終止程序
return;
}
// 判斷是否有非法字符(除了中英文荠锭、數(shù)字、下劃線(xiàn)以外的字符)
var charReg = /[^\u4E00-\u9FA5\w]/;
var res = charReg.test(uname);
// 如果res為真晨川，表示有非法字符
if (res) {
// 設(shè)置錯(cuò)誤信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用戶(hù)名僅支持中英文证九、數(shù)字和下劃線(xiàn),且不能為純數(shù)字';
// 設(shè)置用戶(hù)名標(biāo)記為false
isUsernameOk = false;
// 終止程序
return;
}
// 經(jīng)過(guò)上述判斷后删豺，說(shuō)明都是合法的字符(中英文、下劃線(xiàn)愧怜、數(shù)字)呀页，接下來(lái)判斷是否為純數(shù)字
var numReg = /\D/;
var res = numReg.test(uname);
// 如果res為false于毙，則表示出了數(shù)字以外無(wú)其他字符
if (!res) {
// 設(shè)置錯(cuò)誤信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用戶(hù)名僅支持中英文褪储、數(shù)字和下劃線(xiàn),且不能為純數(shù)字';
// 設(shè)置用戶(hù)名標(biāo)記為false
isUsernameOk = false;
// 終止程序
return;
}
// 滿(mǎn)足以上條件后枉氮，判斷用戶(hù)名字符串的長(zhǎng)度
var len = 0; // 表示用戶(hù)名的長(zhǎng)度
for (var i = 0; i < uname.length; i++ ) {
// 如果是中文裙犹，就+2；否則+1
if (/[\u4E00-9FA5]/.test(uname[i])) {
len += 2;
} else {
len += 1;
}
// 盡量避免執(zhí)行過(guò)多的次數(shù)折汞，一旦len超過(guò)14就不滿(mǎn)足條件了
if (len > 14) {
break;
}
}
// 判斷是否滿(mǎn)足條件
if (len > 14) {
// 設(shè)置錯(cuò)誤信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用戶(hù)名不能超過(guò)7個(gè)漢字或14個(gè)字符';
// 設(shè)置用戶(hù)名標(biāo)記為false
isUsernameOk = false;
// 終止程序
return;
} else {
// 設(shè)置成功信息
var span = this.nextElementSibling;
span.className = 'success';
span.innerHTML = '√';
// 設(shè)置成功的標(biāo)志
isUsernameOk = true;
}
}
</script>
綜述
以上呢就是實(shí)現(xiàn)百度賬戶(hù)注冊(cè)用戶(hù)名的整個(gè)校驗(yàn)過(guò)程锅尘，小伙伴可以好好參考下思路是怎樣的井辜，代碼是一步步的如何實(shí)現(xiàn)滴著摔，在日常的開(kāi)發(fā)中缓窜，賬戶(hù)注冊(cè)驗(yàn)證是經(jīng)常能預(yù)見(jiàn)到，希望各位小伙伴能觸類(lèi)旁通梨撞，窺一斑而知全豹雹洗。
