我让chatgpt写前端功能，看来当个甩手掌柜指日可待，上例子。

Hi，我是贝格前端工场，Chatgpt出来快一年，我也是离不开它了，这不一些简单的前端功能都让他来写吧，看来我有可能要解放了。

闲言少叙，直接上例子。

这是一个注册表单，截图如下

表单部分的html和css类名写好，如下

<form action="" autocomplete="off">
                                <ul class="login-list register-list">
                                    <li>
                                        <div class="img-box">
                                            <img class="translate1" src="skin/images/account-1.png" alt="">
                                        </div>
                                        <input type="tel" placeholder="请输入账号" id="tel" maxlength="11" onblur="changeDisable1()" onKeyUp="keypress2()">
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img class="translate1" src="skin/images/verification.png" alt="">
                                        </div>
                                        <input type="password" placeholder="请输入验证码" id="code">
                                        <button type="button" disabled="true" class="register-code">获取验证码</button>
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img class="translate1" src="skin/images/invitation.png" alt="">
                                        </div>
                                        <input type="text" placeholder="请输入推广码">
                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img class="translate1" src="skin/images/name.png" alt="">
                                        </div>
                                        <input type="text" placeholder="请输入姓名" id="name">

                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img class="translate1" src="skin/images/password-1.png" alt="">
                                        </div>
                                        <input type="password" placeholder="请输入密码" id="pwd">

                                    </li>
                                    <li>
                                        <div class="img-box">
                                            <img class="translate1" src="skin/images/password-1.png" alt="">
                                        </div>
                                        <input type="password" placeholder="请再次输入密码" id="pwd1">

                                    </li>
                                </ul>
                                <button type="submit" class=" btn1 btn_on time4 submit">注册</button>
                            </form>

我把代码复制到聊天窗口里面，给chatGPT提了六点要求

这是一个注册表单，请写出验证代码，要求用jquery实现以下功能

1、账号为手机号，需要输入正确手机号，必填项

2、手机号输入正确后，点击获取验证码的button，这个位置替换为60秒倒计时，此项必填

3、推广码可选

4、姓名不能为空，不能使用中文和数字

5、密码大于6位数，两次密码不一致，给出提示

6、以上条件都满足后，点击注册，才可以想后端提交信息

 

聊天窗口截图

然后给我返回了如下代码

script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 验证手机号格式
        function validateTel(tel) {
            var reg = /^1[3456789]\d{9}$/;
            return reg.test(tel);
        }

        // 验证姓名格式
        function validateName(name) {
            var reg = /^[a-zA-Z]+$/;
            return reg.test(name);
        }

        // 验证密码格式
        function validatePassword(password) {
            return password.length >= 6;
        }

        // 验证两次输入的密码是否一致
        function validateConfirmPassword(password, confirmPassword) {
            return password === confirmPassword;
        }

        // 获取验证码
        function getCode() {
            // 在这里编写获取验证码的逻辑，根据实际需求进行处理
            // 设置60秒倒计时
            var count = 60;
            var button = $('.register-code');
            button.prop('disabled', true);
            var interval = setInterval(function() {
                count--;
                button.text(count + '秒后重新获取');
                if (count <= 0) {
                    clearInterval(interval);
                    button.text('获取验证码');
                    button.prop('disabled', false);
                }
            }, 1000);
        }

        // 表单验证
        $('form').submit(function(event) {
            event.preventDefault(); // 阻止表单提交

            var telInput = $('#tel');
            var codeInput = $('#code');
            var promoCodeInput = $('#promoCode');
            var nameInput = $('#name');
            var passwordInput = $('#pwd');
            var confirmPasswordInput = $('#pwd1');

            // 验证手机号
            var tel = telInput.val();
            if (!validateTel(tel)) {
                alert('请输入正确的手机号');
                return;
            }

            // 验证姓名
            var name = nameInput.val();
            if (!name || !validateName(name)) {
                alert('姓名不能为空，且只能包含字母');
                return;
            }

            // 验证密码
            var password = passwordInput.val();
            if (!validatePassword(password)) {
                alert('密码长度不能少于6位');
                return;
            }

            // 验证确认密码
            var confirmPassword = confirmPasswordInput.val();
            if (!validateConfirmPassword(password, confirmPassword)) {
                alert('两次输入的密码不一致');
                return;
            }

            // 验证通过，可以向后端提交注册信息
            // 在这里添加向后端提交注册信息的逻辑
            alert('注册成功');
        });

        // 输入手机号时检测是否可以获取验证码
        $('#tel').on('keyup', function() {
            var button = $('.register-code');
            button.prop('disabled', !validateTel($(this).val()));
        });

        // 点击获取验证码按钮
        $('.register-code').click(function() {
            if (!validateTel($('#tel').val())) {
                alert('请输入正确的手机号');
                return;
            }
            getCode();
        });
    });
</script>

我把代码复制到Html中（未改动）

 

好了，开始检测功能了

功能一：账号为手机号，需要输入正确手机号，必填项

结果：完美

 

输入错误

正确输入，此项通过

功能二：手机号输入正确后，点击获取验证码的button，这个位置替换为60秒倒计时，此项必填

结果：完美

完美

功能3456

• 3、推广码可选
• 4、姓名不能为空，不能使用中文和数字
• 5、密码大于6位数，两次密码不一致，给出提示
• 6、以上条件都满足后，点击注册，才可以向后端提交信息

结果：完美、完美、完美、完美！

有了这个之后，一些功能真的不用自己写了，即便出现了报错，包错误复制给它，也就给你解答了。

可能有老铁又问了，那html和css谁来写，其实也有工具，我知道几家，等我比较之后，在介绍几个设计图转html和css的工具吧。