验证用户名信息是否有效

最新推荐文章于 2023-09-25 19:58:54 发布

热血男孩520

最新推荐文章于 2023-09-25 19:58:54 发布

阅读量97

点赞数

分类专栏：动态网页项目开发

本文链接：https://blog.csdn.net/weixin_62853665/article/details/124857516

版权

HTML JavaScript 正则表达式用户验证前端开发

关键词由CSDN通过智能技术生成

动态网页项目开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!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(./images/error1.png) no-repeat left center;
 }

     .right {
     color: green;
     background: url(./images/right1.png) no-repeat left center;
 }
 </style>
</head>

<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>
</body>

</html>

运行结果为：

热血男孩520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
验证用户名信息是否有效

<!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&.
复制链接

扫一扫