JS注册表单demo效果需求限制输入框的输入长度用监听事件可以参考：https://blog.51cto.com

效果

联想截图_20231121104852.png
需求
限制输入框的输入长度	用监听事件
可以参考：blog.51cto.com/u_16213324/…
代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 500px;
            border: 1px solid gray;
            position: relative;
            top: 150px;
            margin: 0 auto;
            padding-top: 50px;
        }

        h2 {
            text-align: center;
            color:#364c73;
        }

        .message,
        .btn {
            text-align: center;
            line-height: 50px;

        }

        .message div input {
            width: 200px;
            height: 25px;
        }
     
        .btn :nth-child(1){
            margin: 15px;
            width: 60px;
            height: 25px;
            background-color: #364c73;
            border: transparent;
            border-radius: 20px;
            color: #fff;
        }
        .btn :nth-child(2){
            margin: 15px;
            width: 60px;
            height: 25px;
            background-color: #fff;
            border: 1px solid #364c73;
            border-radius: 20px;
            color: #364c73;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>新用户注册</h2>
        <form action="">
        <div class="message">
            <div>
                昵称：<input type="text" placeholder="不超过十个字" id="nikname" name="nikname" required>
            </div>

            <div>
                姓名：<input type="text" placeholder="姓名不超过四个字" id="name" required>

            </div>

            <div>
                QQ:&emsp; <input type="text" placeholder="长度大于5小于等于10" id="qq" required>
            </div>

            <div>
                电话：<input type="text" placeholder="11位数字" id="phonenum" required>
            </div>

            <div>
                邮箱：<input type="text" placeholder="请输入正确格式" id="email" required>
            </div>

            <div>
                密码：<input type="password" placeholder="字母和数字组成且大于5小于16" id="password" required>

            </div>

            <div style="position: relative; right: 17px;">
                确认密码：<input type="password" placeholder="请再次确认密码" id="pass" required>
            </div>
        </div>


        <div class="btn">
            <input type="submit" value="提交" id="sub">
            <input type="reset" value="重置" id="res">
        </div>


    </div>
</form>
</div>




    <script>

        //监听事件
        //昵称
        const nikname = document.getElementById(`nikname`);
        const maxLength = 10;

        nikname.addEventListener(`input`, function () {
            //value来获取输入框的当前输入内容
            let inputContent = nikname.value;
            if (inputContent.length > maxLength) {
                inputContent = inputContent.substring(0, maxLength);
                alert("昵称请在十字以内")
            }
            nikname.value = inputContent;
        })


        //姓名
        const name = document.getElementById(`name`);
        const maxLength2 = 4;

        name.addEventListener(`input`, function () {
            let inputContent = name.value;
            if (inputContent.length > maxLength2) {
                inputContent = inputContent.substring(0, maxLength2);
                alert("请输入四字以内姓名")
            }
            name.value = inputContent;
        })

        //qq
        const qq = document.getElementById(`qq`);
        const minLengthqq = 5;
        const maxLengthqq = 10;

        qq.addEventListener(`input`, function () {
            let inputContent = qq.value;
            if (inputContent.length > maxLengthqq) {
                //substring截取
                inputContent = inputContent.substring(0, maxLengthqq);
            }
            //更新输入框的值，确保显示的内容符合限制。最后可以用value属性来设置输入框的值
            qq.value = inputContent;
        })



        //电话
        const phonenum = document.getElementById(`phonenum`);
        const maxLengthnum = 11;

        phonenum.addEventListener(`input`, function () {
            let inputContent = phonenum.value;
            if (inputContent.length > maxLengthnum) {
                inputContent = inputContent.substring(0, maxLengthnum);
            }
            phonenum.value = inputContent;
        })


        //密码
        const password = document.getElementById(`password`);
        const maxLengthpassword = 16;

        password.addEventListener(`input`, function () {
            let inputContent = password.value;
            if (inputContent.length > maxLengthpassword) {
                inputContent = inputContent.substring(0, maxLengthqq);
            }
            password.value = inputContent;
        })

        const pass = document.getElementById(`pass`);

    </script>
</body>

</html>