js两种常见验证提示效果

最新推荐文章于 2022-02-15 11:42:52 发布

B1293773843

最新推荐文章于 2022-02-15 11:42:52 发布

阅读量414

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_58562753/article/details/121524799

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function clickFun(){
            //当我们要对一个标签进行操作时，先要获取这个标签对象。  通过id获取标签对象
            var elementById = document.getElementById("username");
            //获取当前内容
            var usernameText = elementById.value;
            //验证 5-12位 字母，数字，下划线  正则表达式
            var patt = /^\w{5,12}$/;

            var elementById1 = document.getElementById("usernameCheck");
            //innerHTML 表示起始标签和结束标签之间的内容  这个属性可读可写
            elementById1.innerHTML = "用户名合法";
            elementById1.innerHTML = "用户名不合法";
            //test方法用于测试某个字符窜是否匹配规则
            //匹配true 不匹配false
            if(patt.test(usernameText)){
                //alert("true");
                elementById1.innerHTML = "用户名合法 <img src='right.png' width='18' height='18'>";
            }else{
                //alert("false");
                elementById1.innerHTML = "用户名不合法<img src='wrong.png' width='18' height='18'>";
            }
        }

    </script>
</head>
<body>
        用户名<input type="text" id="username" value="a123">
        <span id="usernameCheck" style="color: red"></span>
        <button onclick="clickFun()">校验</button>

</body>
</html>