前言
最近有很多小伙伴问到，百度账户注册时用户名是如何进行校验的，用户名的正则表达式是如何定义的，针对小伙伴的问题，让我们一起来揭开那神秘的面纱...
谋定而后动
古人云：谋定而后动。我们先来观察百度账户注册时的场景，关于用户名的场景有一下几个：
-
默认情况显示：
用户名默认情况.png -
用户名中出现特殊字符
用户名特殊字符.png -
用户名中纯数字
用户名纯数字.png -
用户名长度
用户名长度.png -
判断账户名是否可用
此规则不再此次讨论范围内，判断账户名是否可用，应结合Ajax向后台服务器发送数据验证
由观察可得，百度账户注册时用户名的规则：
- 用户名由中英文字符、下划线、数字组成，不能为纯数字
- 用户名的长度不能超过7个汉字或14个英文字符
动起来...
很多小伙伴在遇到用户名注册开发时，都会想到正则表达式，都在考虑如果通过一个正则表达式来完成所有的约束。很多情况下都是OK的，但是在这里想通过一个正则表达式来完成所有的约束条件是非常有困难滴！(如果有哪位小伙伴，有一个正则表达式完成所有的需求，可留言评论、探讨...)
那对于百度注册用户名这个情况，我们需要如何去实现呢，小伙伴不要担心。就像追女朋友一样，直接上搞不定，那就迂回一下喽...
分解要求
对于百度账户注册的用户名规则，我们进行要求分解：
- 判断用户名是否为空
- 判断用户名中是否包含非法字符(除了中英文、数字、下划线以外的字符)
- 判断用户名是纯数字(也就是除了数字以外是否还有其他字符)
- 判断用户名的长度(遍历整个用户名字符串，是中文长度+2，否则长度+1)
聪明的小伙伴，看到这里是否你已经明白了呢...
代码实现
一切从简，重在理论
HTML部分
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>百度账户用户名注册规则详解</title>
<style>
/* 描述用户名注册的提示信息 */
.tipMsg{
color: #333;
}
/* 错误提示信息样式 */
.error{
color: #F00;
}
/* 成功提示信息样式 */
.success{
color: #0F0;
}
</style>
</head>
<body>
<form action="" id="reg">
用户名：<input type="text" name="username" id="username"><span class="tipMsg"></span><br><br>
<input type="submit" value="注册">
</form>
</body>
</html>
JS逻辑部分
<script>
// 获取元素
var username = document.getElementById('username');
var reg = document.getElementById('reg');
// 设置用户名是否满足条件的标志 false 表示没有通过，true表示通过
var isUsernameOk = false;
// 设置表单的提交事件，根据条件是否允许提交
reg.onsubmit = function () {
if (!isUsernameOk) {
// 取消表单的默认事件,终止执行
return false;
}
}
// 获取焦点，设置提示信息
username.onfocus = function () {
// 设置提示信息span的类名和信息
var span = this.nextElementSibling;
span.className = 'tipMsg';
span.innerHTML = '设置后不可更改<br>中英文均可，最长14个英文或7个汉字';
}
// 失去焦点，判断是否满足条件
username.onblur = function () {
// 去除多余的空白字符
var uname = this.value.trim();
// 判断是否为空
if (uname == '') {
// 设置错误信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用户名不允许为空';
// 设置用户名标记为false
isUsernameOk = false;
// 终止程序
return;
}
// 判断是否有非法字符(除了中英文、数字、下划线以外的字符)
var charReg = /[^\u4E00-\u9FA5\w]/;
var res = charReg.test(uname);
// 如果res为真，表示有非法字符
if (res) {
// 设置错误信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用户名仅支持中英文、数字和下划线,且不能为纯数字';
// 设置用户名标记为false
isUsernameOk = false;
// 终止程序
return;
}
// 经过上述判断后，说明都是合法的字符(中英文、下划线、数字)，接下来判断是否为纯数字
var numReg = /\D/;
var res = numReg.test(uname);
// 如果res为false，则表示出了数字以外无其他字符
if (!res) {
// 设置错误信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用户名仅支持中英文、数字和下划线,且不能为纯数字';
// 设置用户名标记为false
isUsernameOk = false;
// 终止程序
return;
}
// 满足以上条件后，判断用户名字符串的长度
var len = 0; // 表示用户名的长度
for (var i = 0; i < uname.length; i++ ) {
// 如果是中文，就+2；否则+1
if (/[\u4E00-9FA5]/.test(uname[i])) {
len += 2;
} else {
len += 1;
}
// 尽量避免执行过多的次数，一旦len超过14就不满足条件了
if (len > 14) {
break;
}
}
// 判断是否满足条件
if (len > 14) {
// 设置错误信息
var span = this.nextElementSibling;
span.className = 'error';
span.innerHTML = '用户名不能超过7个汉字或14个字符';
// 设置用户名标记为false
isUsernameOk = false;
// 终止程序
return;
} else {
// 设置成功信息
var span = this.nextElementSibling;
span.className = 'success';
span.innerHTML = '√';
// 设置成功的标志
isUsernameOk = true;
}
}
</script>
综述
以上呢就是实现百度账户注册用户名的整个校验过程，小伙伴可以好好参考下思路是怎样的，代码是一步步的如何实现滴，在日常的开发中，账户注册验证是经常能预见到，希望各位小伙伴能触类旁通，窥一斑而知全豹。
