渡课学习 23天 js表单对自己不太满意

最新推荐文章于 2024-09-29 20:28:56 发布

原创最新推荐文章于 2024-09-29 20:28:56 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的HTML表单，使用JavaScript进行实时验证的例子。重点在于用户名字段的验证，确保其不为空且长度不超过6个字符。通过修改输入框旁的错误提示信息来反馈验证结果，同时使用按钮点击事件触发验证过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一直报错什么situation。。。。。。。多打几遍试试附上自己打的

<!DOCTYPE html>
<html>
<head>
    <title>biaodan</title>
</head>
<body style="background-color: brown">
    <form>
        <span style="color: pink">*</span>
        用户名：<input type="text" id="username" name="">
        <span id="usernameError" style="color: blue"></span>
        <input type="button" value="提交" onclick="formA()" name="">
        <span id="rsSpan"></span>
    </form>
    <script type="text/javascript">
        var formA = function(){
            var flag = true;
            var errorMsg = "";
            var username = document.getElementById('username').value
            if (username.trim() == "" || username.trim().length > 6) {
                flag = false;
                document.getElementById("usernameError").innerHTML = "用户名为空或者字符超过6个";
            } else {
                document.getElementById("usernameError").innerHTML = "";
            }
            if (flag){
                document.getElementById("rsSpan").innerHTML = "ojbk";
                document.getElementById("rsSpan").style.color ="grey";
            }else {
                document.getElementById("rsSpan").innerHTML = "noojbk";
                document.getElementById("rsSpan").style.color = "yellow";
            }
        }
    </script>

</body>
</html>