JS:验证用户名是否有效

2021-10-20

校验用户名是否合法:

1:文字提示

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        /**
         *当用户点击校验，获取输出框的内容，验证是否合法
         * 由字母数字下划线组成，长度为5到12位
         */
        function onclickFun(){
            //获取标签对象
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            //验证字符串符合某个规则，需要正则表达式
            var patt = /^\w{5,12}$/;
            //test() 方法用于测试某个字符串，是不是匹配的的规则，匹配返回true，不匹配返回false
			var usernameSpanObj = document.getElementById("tishi");
            if(patt.test(usernameText)){
                usernameSpanObj.innerHTML = "用户名合法";
            }else {
                 usernameSpanObj.innerHTML = "用户名不合法";
            }
        }
    </script>
</head>
<body>
用户名:<input tpye="text" id="username" value=""/>
<button onclick="onclickFun();">校验</button>
<span id="tishi" style="color: red;"></span>
</body>>

</html>

2.图标提示

            if(patt.test(usernameText)){
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            }else {
                 usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }

阅读剩余

作者：Tin

链接：http://www.tinstu.com/1494.html

文章版权归作者所有，未经允许请勿转载。

THE END