手机号码注册网页代码如何实现验证？-网页设计-锦华智联科技

HTML (结构): 定义了注册表单的页面结构。
CSS (样式): 让表单看起来美观、现代。
JavaScript (逻辑): 实现了手机号码格式验证、获取验证码、以及最终的表单提交逻辑。

您可以将这三部分代码分别保存为 .html, .css, 和 .js 文件，并在同一个文件夹下运行 index.html 即可看到效果。

（图片来源网络，侵删）

HTML 代码 (`index.html`)

这是页面的骨架,包含了输入框、按钮和提示信息。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">手机号注册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>创建新账户</h2>
        <p>请使用您的手机号码进行注册</p>
        <form id="registrationForm">
            <!-- 手机号输入 -->
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" placeholder="请输入11位手机号" maxlength="11" required>
                <div class="error-message" id="phoneError"></div>
            </div>
            <!-- 验证码输入 -->
            <div class="form-group">
                <label for="verificationCode">验证码</label>
                <div class="code-input-group">
                    <input type="text" id="verificationCode" name="verificationCode" placeholder="请输入6位验证码" maxlength="6" required>
                    <button type="button" id="getVerificationCodeBtn">获取验证码</button>
                </div>
                <div class="error-message" id="codeError"></div>
            </div>
            <!-- 密码输入 -->
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" placeholder="请设置您的密码" required>
                <div class="error-message" id="passwordError"></div>
            </div>
            <!-- 提交按钮 -->
            <button type="submit" id="submitBtn">立即注册</button>
        </form>
        <!-- 成功提示 -->
        <div class="success-message" id="successMessage">
            注册成功！正在跳转...
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS 代码 (`style.css`)

这是页面的样式表,让表单看起来更专业、用户友好。

/* 基础样式重置 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #333;
}
/* 容器样式 */
.container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 400px;
}
h2 {
    text-align: center;
    margin-bottom: 10px;
    color: #2c3e50;
}
p {
    text-align: center;
    color: #7f8c8d;
    margin-bottom: 30px;
    font-size: 14px;
}
/* 表单组样式 */
.form-group {
    margin-bottom: 20px;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 14px;
}
input[type="tel"],
input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s;
}
input:focus {
    outline: none;
    border-color: #3498db;
}
/* 验证码输入框和按钮组合 */
.code-input-group {
    display: flex;
    gap: 10px;
}
#verificationCode {
    flex-grow: 1;
}
#getVerificationCodeBtn {
    padding: 0 15px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    color: #34495e;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap; /* 防止按钮文字换行 */
    transition: background-color 0.3s, color 0.3s;
}
#getVerificationCodeBtn:hover {
    background-color: #bdc3c7;
}
#getVerificationCodeBtn:disabled {
    background-color: #95a5a6;
    color: #ecf0f1;
    cursor: not-allowed;
}
/* 错误信息样式 */
.error-message {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 5px;
    min-height: 16px; /* 防止布局跳动 */
}
/* 提交按钮样式 */
#submitBtn {
    width: 100%;
    padding: 12px;
    background-color: #3498db;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}
#submitBtn:hover {
    background-color: #2980b9;
}
/* 成功消息样式 */
.success-message {
    display: none;
    text-align: center;
    color: #27ae60;
    font-weight: bold;
    padding: 15px;
    border: 1px solid #27ae60;
    border-radius: 5px;
    background-color: #eafaf1;
}

JavaScript 代码 (`script.js`)

这是页面的“大脑”，处理所有交互逻辑，如验证、发送模拟请求等。

document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const form = document.getElementById('registrationForm');
    const phoneInput = document.getElementById('phone');
    const phoneError = document.getElementById('phoneError');
    const codeInput = document.getElementById('verificationCode');
    const codeError = document.getElementById('codeError');
    const getVerificationCodeBtn = document.getElementById('getVerificationCodeBtn');
    const submitBtn = document.getElementById('submitBtn');
    const successMessage = document.getElementById('successMessage');
    // 手机号正则表达式
    const phoneRegex = /^1[3-9]\d{9}$/;
    // 获取验证码按钮点击事件
    getVerificationCodeBtn.addEventListener('click', () => {
        // 1. 验证手机号
        if (!phoneRegex.test(phoneInput.value)) {
            phoneError.textContent = '请输入正确的11位手机号码';
            phoneInput.focus();
            return;
        }
        phoneError.textContent = ''; // 清除错误信息
        // 2. 模拟发送验证码（这里只是前端模拟）
        phoneError.textContent = '验证码已发送 (模拟)';
        phoneError.style.color = '#27ae60'; // 变为绿色提示
        // 3. 开始倒计时
        let countdown = 60;
        getVerificationCodeBtn.disabled = true;
        const timer = setInterval(() => {
            countdown--;
            getVerificationCodeBtn.textContent = `${countdown}秒后重试`;
            if (countdown <= 0) {
                clearInterval(timer);
                getVerificationCodeBtn.disabled = false;
                getVerificationCodeBtn.textContent = '获取验证码';
            }
        }, 1000);
    });
    // 表单提交事件
    form.addEventListener('submit', (event) => {
        event.preventDefault(); // 阻止表单默认提交行为
        // 1. 重置所有错误信息
        phoneError.textContent = '';
        codeError.textContent = '';
        let isValid = true;
        // 2. 验证手机号
        if (!phoneRegex.test(phoneInput.value)) {
            phoneError.textContent = '请输入正确的11位手机号码';
            isValid = false;
        }
        // 3. 验证验证码
        if (codeInput.value.length !== 6 || isNaN(codeInput.value)) {
            codeError.textContent = '请输入6位数字验证码';
            isValid = false;
        }
        // 4. 验证密码（简单示例：至少6位）
        const password = document.getElementById('password').value;
        if (password.length < 6) {
            document.getElementById('passwordError').textContent = '密码长度至少为6位';
            isValid = false;
        }
        // 5. 如果所有验证都通过
        if (isValid) {
            // 在实际项目中，这里会使用 fetch 或 axios 发送数据到后端API
            console.log('注册信息:', {
                phone: phoneInput.value,
                code: codeInput.value,
                password: password
            });
            // 模拟API请求延迟
            submitBtn.textContent = '注册中...';
            submitBtn.disabled = true;
            setTimeout(() => {
                // 隐藏表单，显示成功消息
                form.style.display = 'none';
                successMessage.style.display = 'block';
                // 3秒后可以跳转到其他页面，window.location.href = 'login.html';
            }, 1500);
        }
    });
    // 手机号输入时实时清除错误提示
    phoneInput.addEventListener('input', () => {
        if (phoneError.textContent) {
            phoneError.textContent = '';
        }
    });
    // 验证码输入时实时清除错误提示
    codeInput.addEventListener('input', () => {
        if (codeError.textContent) {
            codeError.textContent = '';
        }
    });
});

如何使用

创建文件: 在您的项目文件夹中创建三个文件：index.html、style.css 和 script.js。
复制代码: 将上面对应的代码分别粘贴到这三个文件中。
运行: 用浏览器打开 index.html 文件，您就能看到一个功能完整的手机注册页面了。

功能说明

手机号验证: 使用正则表达式 ^1[3-9]\d{9}$ 确保输入的是中国大陆有效的11位手机号。
获取验证码:
- 点击前会验证手机号格式。
- 点击后会进入60秒倒计时,按钮变为禁用状态，防止重复点击。
- 这是一个前端模拟,实际项目中需要调用后端发送短信的API。
表单提交:
- 提交时会再次验证所有字段。
- 如果验证失败,会在对应字段下方显示友好的错误提示。
- 如果验证成功,会模拟一个异步请求（使用 setTimeout），然后显示“注册成功”的提示。
用户体验:
- 输入框获得焦点时有视觉反馈。
- 错误提示清晰。
- 按钮状态变化明确。

这份代码是一个很好的起点,您可以根据实际需求进行修改和扩展，例如连接真实的后端API、添加更复杂的密码强度检测、增加“用户协议”勾选框等。

（图片来源网络，侵删）

手机号码注册网页代码如何实现验证？

HTML 代码 (index.html)

CSS 代码 (style.css)

JavaScript 代码 (script.js)

如何使用

功能说明

HTML 代码 (`index.html`)

CSS 代码 (`style.css`)

JavaScript 代码 (`script.js`)