正则表达式案例：用户名验证

案例：用户名验证

功能需求：

如果用户名输入合法，则后面提示信息为：用户名合法，并且颜色为绿色。
如果用户名输入不合法，则后面提示信息为：用户名不符合规范，并且颜色为红色。

分析:

用户名只能为英文字母，数字，下划线或者短横线组成,，并且用户名长度为 6~16位。
首先准备好这种正则表达式模式 /^ [a-zA-Z0-9-_]{6,16}$/
当表单失去焦点就开始验证。
如果符合正则规范,，则让后面的 span 标签添加 right 类。
如果不符合正则规范，则让后面的 span 标签添加 wrong 类。

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>用户名验证</title><style>span {color: #aaa;font-size: 14px;}.right {color: green;}.wrong {color: red;}</style>
</head><body><input type="text" class="uname"> <span>请输入用户名</span><script>// 量词是设定某个模式出现的次数// 这个模式用户只能输入英文字母 数字 下划线 短横线但是有边界符和[] 这就限定了只能多选1var regexp = /^[a-zA-Z0-9_-]{6,16}$/;   // {6,16}  中间不要有空格// console.log(regexp.test('a'));// false// console.log(regexp.test('18'));// false// console.log(regexp.test('aa'));// false// console.log('----------------------------------');// console.log(regexp.test('andy-red'));// true// console.log(regexp.test('andy_red'));// true// console.log(regexp.test('andy007'));// true// console.log(regexp.test('andy!007'));// falsevar uname = document.querySelector('.uname');var span = document.querySelector('span');uname.onblur = function () {if (regexp.test(this.value)) {console.log('正确的');span.className = 'right';span.innerHTML = '用户名格式输入正确';} else {console.log('错误的');span.className = 'wrong';span.innerHTML = '用户名格式输入不正确';}}</script>
</body></html>

正则表达式案例：用户名验证相关推荐

【前端学习-25】【day04】正则表达式、表单验证、用户名验证
[day04正则表达式] 一.正则表达式 1.1 什么是正则表达式 1.2 正则表达式的特点二.正则表达式在js中的应用 2.1 创建正则表达式(两种方式) 三.正则表达式的特殊字符 3.1 边界符 ...
案例：验证用户名是否可用
案例:验证用户名是否可用 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
正则表达式-注册表验证
正则表达式-注册表验证正则表达式正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符及这些特定字符的组合,组成一个"规则字符串",这个"规则字符串& ...
电话号码正则表达式键盘弹起验证
 <input class="telphone-number" onkeyup="(this.v=funct ...
Scala进阶之路-正则表达式案例
Scala进阶之路-正则表达式案例作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 废话不多说,正则大家都很清楚,那在Scala如何使用正则了?我们直接上个案例,如下: 1 /* 2 ...
【转】ASP.NET验证控件详解(非空验证，比较验证，范围验证，正则表达式，自定义验证)...
[转]ASP.NET验证控件详解(非空验证,比较验证,范围验证,正则表达式,自定义验证) ASP.NET验证控件详解现在ASP.NET,你不但可以轻松的实现对用户输入的验证,而且,还可以选择验证在服 ...
Javascript中使用正则表达式进行数据验证
Javascript中使用正则表达式进行数据验证 <script language="javascript"> function checkMobile(mobile ...
正则表达式之数字验证
博客地址:http://www.cnblogs.com/zhuzhenwei918/p/6202932.html 正则表达式之数字验证第一部分:数值验证 1.验证只包含数字.指定长度(N)的字符串 ...
javascript正则检测用户名验证密码邮箱手机号
正则验证用户名密码手机号邮箱 html <body><form><div> 请输入账号:<input type="te ...

正则表达式案例：用户名验证

案例：用户名验证

正则表达式案例：用户名验证相关推荐

最新文章

热门文章