验证用户姓名

最新推荐文章于 2024-07-10 01:10:22 发布
最新推荐文章于 2024-07-10 01:10:22 发布
阅读量75 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69180398/article/details/124932917
版权

<!DOCTYPE  html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>课堂案例-验证用户名案例</title>

  <style>

    span {

      display: inline-block;

      width: 250px;

      height: 30px;

      vertical-align: middle;

      line-height: 30px;

      padding-left: 15px;

    }

 

    .error {

      color: red;

      background: url(image/error1.png) no-repeat left center;

    }

 

    .right {

      color: green;

      background: url(image/right1.png) no-repeat left center;

    }

  </style>

</head>

 

<body>

</body>

  <input type="text">

  <span></span>

  <script>

    let input=document.querySelector('input');

    let span=input.nextElementSibling;

    input.addEventListener('blur',function(){

      if(/^[a-zA-Z0-9-_]{6,16}$/.test(input.value)){

        span.className='right';

        span.innerHTML='输入正确';

      }else{

        span.className='error';

        span.innerHTML='输入错误';

      }

    })

  </script>

</html>

没有翅膀却想飞上天空892
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
验证用户名案例
liying999的博客
05-20 101
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title.
模仿京东输入内容案例
Jessicawh的博客
08-24 388
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do
outline属性-关于input获取焦点时的边框(划去，其实是轮廓)设置
dark_cy的博客
07-11 7595
直入正题点这里 　　今天跟着视频做静态网页练习的时候，有用到 <input> 标签做查询输入框。因为代码是跟着视频来写的，所以布局的样式都没啥毛病，但是当我点击输入框，让其获得焦点时，输入框就会显示出来一个黑色的边框（如下图）。 　　看到这个框框我就很纳闷，我根本没有设置这样的属性啊！这个莫名其妙的黑色框框是哪里来的？难道我少写了什么代码？ 　　抱着这样的疑问，我又重新看了一遍视频中的相关部分，发现我的代码跟视频中的一模一样，可是视频中老师并没有讲到关于这个框框的问题，他在写好这部分代码后压根
JavaScript——常用的键盘事件
shhghvvh的博客
11-26 5402
不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性。请注意，该特性随时可能无法正常工作。核心思路︰检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面。使用键盘事件对象里面的keyCode判断用户按下的是否是s键。onkeypress某个键盘按键被按下时触发︰但是。等调节性按键的状态和键盘的区域 / 和布局有关。搜索框获得焦点∶使用js 里面的focus()方法。返回用户按下的物理按键的值。
input 使用outline属性去掉淡蓝色边框不生效
叶落无痕的博客
01-10 5389
1.常用的做法是使用outline:none 这个样式就可以了 &lt;html&gt;     &lt;head&gt;         &lt;title&gt;             测试         &lt;/title&gt;         &lt;style type="text/css"&gt;             input{                 outl...
Outline，Input样式的设置，小米官网搜索框
DanmoSAMA的博客~
02-12 977
在做小米项目右上角的搜索框的时候，发现了该问题，现总结如下： outline outline和border类似，只不过outline不占用空间，而border占用空间 #box1{ width: 300px; height: 300px; margin: 0px auto; background-color: #bfa; outline: 10px solid green; border: 5px solid red; } #box2{ width: 300px; height: 30
JS验证_密码用户名手机号码用户姓名
12-04
JS验证_密码用户名手机号码用户姓名,进行良好的前端校验
利用某K某K游戏验证姓名和身份证的PHP源码
02-24
这个PHP源码就是针对某K某K游戏设计的，用于验证用户输入的姓名和身份证信息的真实性。下面将详细介绍这个验证过程涉及的关键知识点。 首先，PHP是一种广泛使用的服务器端脚本语言，尤其在Web开发领域，它提供了...
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好…的验证)
12-10
问题：表单怎么在输入后立即验证，而不是提交后再验证那么不方便（网上搜到的要么是模棱两可，要么是残缺不全…） 方法：鉴于此，加上我个人的理解（注释）在上面。 截图： 代码： <!DOCTYPE html> <...
php 验证身份证与姓名是否匹配
11-09
在PHP中验证身份证（身份证号，也称为居民身份证号码）与姓名是否匹配是一个常见的需求，尤其是在用户注册、实名认证等场景中。这个过程涉及到身份证号码的合法性验证以及姓名与身份证号码的一致性检查。以下将详细...
姓名识别程序
03-24
8. **测试图片**: `测试.png`和`测试2.png`可能用于测试姓名识别的视觉展示或者GUI界面，可以帮助开发者验证程序的正确性和用户体验。 9. **测试目录`: `test`可能包含了一些测试用例，用于检查程序的功能是否符合...
html input边线,input边框，轮廓outline属性
weixin_26795617的博客
06-19 2165
昨天在一个技术群里问关于input表单的问题，修改其边框兼容等问题，明明记得以前修改的时候IE6是不兼容的不知道，怎么的，现在写了一下都没事了，心里一阵的郁闷啊，现在记住之前写的样式，要是以后在遇到，就要好好的研究一番了input{width:400px; height:40px; line-height:40px;text-indent:10px;border:0px;outline:none;...
outline作用
qq_44913478的博客
06-10 671
●　outline-color：规定轮廓的颜色。●　outline-style：规定轮廓的样式。●　outline-width：规定轮廓的宽度。outline也可以用于input标签去除轮廓线，跟border标签用法差不多只不过它的宽度不会被计算在内。...
ES6新语法之字符串新增方法：startswith() ，endswith()，trim() 方法
weixin_45819386的博客
04-18 3445
系列文章目录 文章目录系列文章目录前言1.startwith（）方法2.endwith（）方法3.trim（）方法输出结果为： ![在这里插入图片描述](https://img-blog.csdnimg.cn/7c747955729a4ffab4aa4038b433f8c4.png)总结 前言 随着ES6的到来，我们JavaScript语法新增了许多语法，今天就来分享一篇关于字符串新增方法的知识； 1.startwith（）方法 作用：startsWith() 方法用于检测字符串是否以指定的前缀开始。
前端必知：35.修改input默认效果
qq_52799985的博客
08-01 6325
二.修改方法 ​。
前端学习（886）：常用的键盘事件
歌谣的博客
04-18 536
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
html隐藏input边框线,css如何去掉input的边框？
weixin_39606244的博客
06-03 5308
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。css去掉input边框代码：input {border: 0; // 去除未选中状态边框outline: none; // 去除选中状态边框background-color: rgba(0, 0, 0, 0);//...
通过 tomcat 让手机访问到电脑写的 html 网页
最新发布
m0_75138009的博客
07-10 684
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
将用户姓名写入验证用户的正则表达式中，用户姓名只能输入英文字母、数字和下划线
07-11
你可以使用以下正则表达式来验证用户姓名只包含英文字母、数字和下划线： ```regex ^[a-zA-Z0-9_]+$ ``` 这个正则表达式的含义是： - `^` 表示匹配字符串的开始 - `[a-zA-Z0-9_]` 表示匹配任意一个英文字母、数字...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值