html 用户名正则表达式,独家解密实现:百度账号注册用户名正则表达式验证规则...
前言
最近有很多小伙伴问到,百度账户注册时用户名是如何进行校验的,用户名的正则表达式是如何定义的,针对小伙伴的问题,让我们一起来揭开那神秘的面纱...
谋定而后动
古人云:谋定而后动。我们先来观察百度账户注册时的场景,关于用户名的场景有一下几个:
默认情况显示:
用户名默认情况.png
用户名中出现特殊字符
用户名特殊字符.png
用户名中纯数字
用户名纯数字.png
用户名长度
用户名长度.png
判断账户名是否可用
此规则不再此次讨论范围内,判断账户名是否可用,应结合Ajax向后台服务器发送数据验证
由观察可得,百度账户注册时用户名的规则:
用户名由中英文字符、下划线、数字组成,不能为纯数字
用户名的长度不能超过7个汉字或14个英文字符
动起来...
很多小伙伴在遇到用户名注册开发时,都会想到正则表达式,都在考虑如果通过一个正则表达式来完成所有的约束。很多情况下都是OK的,但是在这里想通过一个正则表达式来完成所有的约束条件是非常有困难滴!(如果有哪位小伙伴,有一个正则表达式完成所有的需求,可留言评论、探讨...)
那对于百度注册用户名这个情况,我们需要如何去实现呢,小伙伴不要担心。就像追女朋友一样,直接上搞不定,那就迂回一下喽...
分解要求
对于百度账户注册的用户名规则,我们进行要求分解:
判断用户名是否为空
判断用户名中是否包含非法字符(除了中英文、数字、下划线以外的字符)
判断用户名是纯数字(也就是除了数字以外是否还有其他字符)
判断用户名的长度(遍历整个用户名字符串,是中文长度+2,否则长度+1)
聪明的小伙伴,看到这里是否你已经明白了呢...
代码实现
一切从简,重在理论
HTML部分
百度账户用户名注册规则详解
/* 描述用户名注册的提示信息 */
.tipMsg{
color: #333;
}
/* 错误提示信息样式 */
.error{
color: #F00;
}
/* 成功提示信息样式 */
.success{
color: #0F0;
}
用户名:
JS逻辑部分
// 获取元素
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 = '设置后不可更改
中英文均可,最长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;
}
}
综述
以上呢就是实现百度账户注册用户名的整个校验过程,小伙伴可以好好参考下思路是怎样的,代码是一步步的如何实现滴,在日常的开发中,账户注册验证是经常能预见到,希望各位小伙伴能触类旁通,窥一斑而知全豹。
html 用户名正则表达式,独家解密实现:百度账号注册用户名正则表达式验证规则...相关推荐
- ajax检测用户名重复无效,用ajax实现检测注册用户名是否重复的完整例子
ValidateName.java代码如下所示,并且采用userIsExist查找数据库看是否存在相同的用户名. package com.wuliu.test; import java.io.IOEx ...
- java 百度账号注册界面_基于百度AI使用H5实现调用摄像头进行人脸注册、人脸搜索功能(Java)...
人脸注册.人脸搜索使用百度AI接口.不支持H5活体检测(需要活体检测请参考百度AI-H5活体检测) 只是为了演示.所以是IP.最好用火狐浏览器访问.谷歌提示异常作者就不专门修改了.大家可以直接下载源码 ...
- java 百度账号注册界面_基于百度AI开放平台的人脸识别的注册登录(1)
百度ai开放平台首页 2.选择产品服务,人脸与人体识别,人脸识别选项.打开后如图所示 人脸识别 3.点击立即使用 3.jpg 4.点击创捷应用 创建应用 这一页大家按自己需求填写即可 5.创建完成后点 ...
- AIADATA 独家深度解密:百度XuperChain开源区块链基础平台
AIADATA 独家深度解密:百度XuperChain开源区块链基础平台 百度超级链Xuperchain正式宣布开源.根据官网显示,链内并行技术.可插拔共识机制.一体化智能合约等四大技术支撑开源,让区 ...
- Python爬虫学习(五)Chrome浏览器自动化测试框架_使用百度账号、QQ第三方登陆百度账号
简单介绍 Selenium(浏览器自动化测试框架) 是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样. 安装第三方模块selenium pip in ...
- 百度贴吧——因百度账号策略调整导致长时间未登录的账号(最后登录在2017年6月1日以前)网页端无法登陆、移动端异常解决方案
问题描述 尝试登录一个最后登录在2017年6月1日以前的百度账号时, 网页端在完成登录程序以后,仍然没有登录状态. 移动端APP在完成登录程序后,可以进行一般操作(查看.发布等),但是不能进行账号安全 ...
- 百度账号管理静态页面
主体代码块: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
- 基于python中selenium库,实现百度账号的自动登陆
1.如何实现自动打开百度网页并登录账号 首先使用chrome浏览器自动打开百度页面,然后寻找到登陆按键的节点元素,并实现点击.接着,找到用户名登陆的节点元素,实现扫码登陆到用户名登陆的切换.然后,找到 ...
- 中传计算机考研复试难吗,独家解密中传MFA面试内幕
独家解密中传MFA面试内幕 [摘要]笔者考研初试分数不算很高,但是我个人认为已经破译了面试老师是否要你的表现,以及面试老师可能问到的问题,在这里分享给大家.▶个 作者 天使爱吃肉 次阅读 2015-1 ...
- OAuth2.0协议入门(一):OAuth2.0协议的基本概念以及使用授权码模式(authorization code)实现百度账号登录
一 OAuth2.0协议的基本概念 (1)OAuth2.0协议 OAuth协议,是一种授权协议,不涉及具体的代码,只是表示一种约定的流程和规范.OAuth协议一般用于用户决定是否把自己在某个服务商上面 ...
最新文章
- 【vs开发】向图形界面程序添加控制台
- 【完整版】当大师遇到了理工男,只能吐血了...
- 深入理解 JVM Class文件格式(六)
- 用了5年Excel,换了这个神奇的报表工具,不禁感叹:国产真香
- matlab 聚类 源程序,聚类——KFCM的matlab程序
- hive 配置用户名_Hive的安装及配置
- PG: Setting up streaming log replication (Hot Standby )
- DELL R340 14G服务器的RAID划分
- 使用CefSharp在.NET中嵌入Google kernel
- MySql数据库的安装,mysql-5.5.28-winx64.msi
- 恒生电子软件测试面试
- java事务_Java 事务详解
- 低延时直播系统开发技术方案
- 爱剪辑 服务器维护,爱剪辑联网检测失败怎么办-修复爱剪辑联网检测失败的方法 - 河东软件园...
- DNS是什么,修改几个数字就能提升网速?(转载)
- 如何在WindowsXP中发短信
- 制作像UberEats和Deliveroo这样的移动应用程序需要多少钱
- 御坂坂的c++学习之路(4)
- 获取mumu模拟器日志
- xshell 登录计算节点_使用xshell远程连接
热门文章
- 火狐主页被360导航劫持怎么办
- 早上不会起不来!五个窍门帮你摆脱起床困难症(ฅ◑ω◑ฅ)
- fv计算机公式,p=fv是什么公式
- python合并文件夹_python实现将两个文件夹合并至另一个文件夹(制作数据集)
- html表格中加入斜线,使用css给table表格表头添加斜线(斜线表格)
- Java集成建行龙支付接口(详细)
- 结对作业 ——UI组第八组 冯富禹 齐天浩
- 手写汉字识别数据集的预处理
- 基于Sentinel-2(哨兵2)遥感卫星的植被覆盖度提取
- python多条件求和_使用sumifs进行多条件求和