JS用户名不合法的两种提示方法【最常用的】

最新推荐文章于 2023-05-13 11:28:03 发布

Draco-_-

最新推荐文章于 2023-05-13 11:28:03 发布

阅读量580

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44392084/article/details/104857432

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

校验规则是：用户名只能有字母，数字，下划线组成，而且长度是5~12

第一种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function onclickfun() {
            var inpobj = document.getElementById("username");
            var textvalue = inpobj.value;
            var errormes = document.getElementById("error");
            //校验用户名只能有字母，数字，下划线组成，而且长度是5~12
            var patt = /^\w{5,12}$/;//正则表达式
            if (patt.test(textvalue)) {
                // alert("用户名合法");
                errormes.innerHTML = "用户名合法";
            } else {
                // alert("用户名不合法");
                errormes.innerHTML = "用户名不合法";
            }
        }
    </script>
</head>

<body>
    用户名：<input type="text" id="username" value="" />
    <button onclick="onclickfun()">校验</button>
    <!-- 提示的错误信息 -->
    <span id="error" style="color:red;">
        
    </span>
</body>

</html>

截图显示：
在这里插入图片描述
第二种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        function onclickfun() {
            var inpobj = document.getElementById("username");
            var textvalue = inpobj.value;
            var errormes = document.getElementById("error");
            //校验用户名只能有字母，数字，下划线组成，而且长度是5~12
            var patt = /^\w{5,12}$/;正则表达式
            if (patt.test(textvalue)) {
                // alert("用户名合法");
                // 但是需要转义一下才可以的
                errormes.innerHTML = "<img src=\"imgs/right.png\" width=\"15\" height=\"15\">";
            } else {
                // alert("用户名不合法");
                errormes.innerHTML = "<img src=\"imgs/wrong.png\" width=\"15\" height=\"15\">";
            }
        }
    </script>
</head>

<body>
    用户名：<input type="text" id="username" value="" />
    <button onclick="onclickfun()">校验</button>
    <!-- 提示的错误信息 -->
    <span id="error" style="color:red;">
        
    </span>
</body>

</html>

截图显示：
在这里插入图片描述

注意：照片的路径要进行转义一下，否则会不好使。

后面两个校验的照片我放到评论里面…
评论区自取哦~~
最后谢谢观看~~
好叭，评论里面放不了，只能在这里了
在这里插入图片描述

Draco-_-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS用户名不合法的两种提示方法【最常用的】

校验规则是：用户名只能有字母，数字，下划线组成，而且长度是5~12第一种方式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫