设计如下表单，并进行数据验证。

十一个月

已于 2022-04-02 21:03:47 修改

阅读量255

点赞数

文章标签： html

于 2022-03-24 19:10:54 首次发布

本文链接：https://blog.youkuaiyun.com/kkmmtb/article/details/123718899

版权

这是一个关于网页注册表单验证的示例。当用户点击提交按钮时，JavaScript 会检查用户名是否以英文字母开头，且长度在6到18位之间，同时密码长度是否不小于6位。如果输入不符合规则，相应的错误提示将显示在页面上。

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

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .all {
            width: 450px;
            height: 350px;
            background-color: rgb(65 197 246);
            margin: 100px auto;
        }

        .all .title {
            width: 450px;
            height: 50px;
            font-size: 24px;
            color: white;
            font-weight: bold;
            text-align: center;
            line-height: 50px;
            background-color: rgb(30 145 199);
        }

        .all ul {
            width: 270px;
            height: 240px;
            margin: 30px auto;
            list-style: none;
        }

        .all ul input {
            width: 270px;
            height: 45px;
            /* margin-top: 30px; */
            text-indent: 15px;
            color: grey;
            border: 1px solid rgb(184, 181, 181);
        }

        .all ul li {
            width: 270px;
            height: 45px;
        }

        .all #list_1,#list_2{
            line-height: 45px;
            color: red;
        }

        .all ul #btn {
            background-color: rgb(30 145 199);
            color: aliceblue;
            font-weight: bold;
        }
    </style>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                var name = document.getElementById('user').value;
                var secrettext = document.getElementById('secretid').value;
                var list_1 = document.getElementById('list_1');
                var list_2 = document.getElementById('list_2');
                if (name.length >= 6 && name.length <= 18) {
                    var keycode = name.charCodeAt(0);
                    // var list_1=document.getElementById('list_1');
                    if (keycode < 65 || (keycode > 90 && keycode < 97) || keycode > 122) {

                        list_1.innerHTML = '用户名必须以英文字母开头';
                        if (secrettext.length < 6) {
                            //alert('hello');
                            list_2.innerHTML = '密码长度不小于6位!';
                        }
                        else{
                            list_2.innerHTML = '';
                        }
                    }
                    else {
                        list_1.innerHTML='';
                        if (secrettext.length < 6) {
                            list_2.innerHTML = '密码长度不小于6位!';
                        }
                        else{
                            list_2.innerHTML = '';
                        }

                    }

                }
                else {
                    list_1.innerHTML = '用户名长度必须为6到18位!';
                }
                // if (secrettext.length < 6) {
                //             list_2.innerHTML = '密码长度不小于6位!';
                // }
            }
        };
    </script>
</head>

<body>
    <div class="all">
        <div class="title">
            <p>注册</p>
        </div>
        <div class="imagine">
            <ul>
                <li><input type="text" name="username" id="user" placeholder="请输入您的用户名"></li>
                <li id="list_1"></li>
                <li><input type="text" name="secret" id="secretid" placeholder="请输入您的密码"></li>
                <li id="list_2"></li>
                <li><input type="button" value="提交" id="btn"></li>
            </ul>

        </div>
    </div>
</body>

</html>