验证输入框合法性

real_fxyyyyyy

于 2022-05-29 21:16:18 发布

阅读量267

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/real_fxy/article/details/125036508

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script type="text/javascript">

        /*
        * 需求：当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
        * 验证的规则是：必须由字母数字下划线组成，并且长度是5到12位
        * */
        function onclickFun() {
            //1.当我们要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //[object HTMLInputElement]她就是dom对象
            var usernameText = usernameObj.value;//得到输入框里面的值
            //如何验证字符串符合某个规则，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;

            var usernameSpanObj = document.getElementById("usernameSpan");
            /*
            * text()方法用于测试某个字符串，是不是匹配我的规则
            * 匹配就返回true，不匹配就返回false
            * */
            //innerHTML 表示起始标签和结束标签里面的内容
            //innerHTML 这个属性可读可写
            // alert(usernameSpanObj.innerHTML);
            if(patt.test(usernameText)){
                // alert("用户名合法！");
                // usernameSpanObj.innerHTML = "用户名合法！";
                usernameSpanObj.innerHTML =" <img src=\"勾.png\" width=\"20\" height=\"20\">";
            }else{
                // alert("用户名不合法！")
                // usernameSpanObj.innerHTML = "用户名不合法！";
                usernameSpanObj.innerHTML =" <img src=\"叉.png\" width=\"20\" height=\"20\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="fxy"/>
    <span id = "usernameSpan" style="color: red">

    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>