搜索
织梦建站

织梦会员注册页面模板如何快速适配？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 12 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 39 分钟
位置： 首页 › 织梦建站 › 正文
  • 响应式设计：在电脑和手机上都能完美显示。
  • 现代化UI：使用 Bootstrap 5 框架，界面简洁大方。
  • 完整的表单字段：包含用户名、密码、确认密码、电子邮箱、手机号、验证码等。
  • 完整的织梦标签：无缝集成织梦的会员系统，提交后自动跳转到登录页或首页。
  • 安全与验证：集成了织梦自带的验证码功能，并预留了前端JavaScript验证逻辑。
  • 清晰的注释：代码中包含详细注释，方便您理解和修改。

第一步：准备模板文件

在您的织梦模板目录（通常是 /templets/）下，创建一个新的文件夹，member，然后在这个 member 文件夹里，创建一个名为 register.htm 的文件。

织梦会员注册页面模板
（图片来源网络，侵删）

第二步：复制并修改模板代码

将下面的完整代码复制到您刚刚创建的 register.htm 文件中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:global.cfg_webname/} - 用户注册</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入自定义CSS (可选) -->
    <style>
        body {
            background-color: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        .register-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 30px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
        }
        .register-title {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-weight: 600;
        }
        .form-label {
            font-weight: 500;
            color: #555;
        }
        .btn-register {
            width: 100%;
            padding: 12px;
            font-size: 16px;
            font-weight: 500;
        }
        .login-link {
            text-align: center;
            margin-top: 20px;
        }
        .login-link a {
            color: #0d6efd;
            text-decoration: none;
        }
        .login-link a:hover {
            text-decoration: underline;
        }
        .alert {
            display: none; /* 默认隐藏，JS验证时显示 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="register-container">
            <h2 class="register-title">欢迎注册</h2>
            <!-- 使用织梦的会员信息处理标签，表单提交到/member/index_do.php -->
            <form name="form1" action="{dede:memberurl action='register'}" method="post" onsubmit="return checkRegister()">
                <!-- 隐藏字段，用于织梦识别和处理 -->
                <input type="hidden" name="dopost" value="regnew">
                <input type="hidden" name="keeptime" value="604800">
                <!-- 提示信息区域 -->
                <div id="msgtip" class="alert alert-danger" role="alert"></div>
                <!-- 用户名 -->
                <div class="mb-3">
                    <label for="userid" class="form-label">用户名</label>
                    <input type="text" class="form-control" name="userid" id="userid" placeholder="请输入4-12位字母或数字" maxlength="12" required>
                    <small class="text-muted">用户名只能由英文字母和数字组成。</small>
                </div>
                <!-- 密码 -->
                <div class="mb-3">
                    <label for="pwd" class="form-label">密码</label>
                    <input type="password" class="form-control" name="pwd" id="pwd" placeholder="请输入6-20位密码" maxlength="20" required>
                </div>
                <!-- 确认密码 -->
                <div class="mb-3">
                    <label for="pwdok" class="form-label">确认密码</label>
                    <input type="password" class="form-control" name="pwdok" id="pwdok" placeholder="请再次输入密码" maxlength="20" required>
                </div>
                <!-- 电子邮箱 -->
                <div class="mb-3">
                    <label for="email" class="form-label">电子邮箱</label>
                    <input type="email" class="form-control" name="email" id="email" placeholder="请输入您的邮箱" required>
                </div>
                <!-- 手机号码 -->
                <div class="mb-3">
                    <label for="mobile" class="form-label">手机号码</label>
                    <input type="tel" class="form-control" name="mobile" id="mobile" placeholder="请输入您的手机号" maxlength="11" required>
                </div>
                <!-- 验证码 -->
                <div class="mb-4">
                    <label for="vdcode" class="form-label">验证码</label>
                    <div class="input-group">
                        <input type="text" class="form-control" name="vdcode" id="vdcode" placeholder="请输入验证码" maxlength="4" required>
                        <img id="vdimgck" style="cursor:pointer;" title="点击刷新" src="{dede:global.cfg_cmspath/}/include/vdimgck.php" alt="验证码" onclick="this.src='{dede:global.cfg_cmspath/}/include/vdimgck.php?t='+Math.random()" />
                    </div>
                </div>
                <!-- 注册按钮 -->
                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-register">立即注册</button>
                </div>
                <!-- 登录链接 -->
                <div class="login-link">
                    已有账号？<a href="{dede:memberurl action='login'}">立即登录</a>
                </div>
            </form>
        </div>
    </div>
    <!-- 引入 Bootstrap 5 JS (Popper.js is required for Bootstrap) -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
    <!-- 前端JavaScript验证逻辑 -->
    <script language="javascript">
        function checkRegister() {
            var msgtip = document.getElementById('msgtip');
            var userid = document.getElementById('userid').value;
            var pwd = document.getElementById('pwd').value;
            var pwdok = document.getElementById('pwdok').value;
            var email = document.getElementById('email').value;
            var mobile = document.getElementById('mobile').value;
            var vdcode = document.getElementById('vdcode').value;
            // 重置提示信息
            msgtip.style.display = 'none';
            msgtip.innerHTML = '';
            // 用户名验证 (示例：4-12位字母数字)
            if (!/^[a-zA-Z0-9]{4,12}$/.test(userid)) {
                showError('用户名必须是4-12位的字母或数字！');
                return false;
            }
            // 密码验证 (示例：不能为空，两次输入必须一致)
            if (pwd == '') {
                showError('密码不能为空！');
                return false;
            }
            if (pwd != pwdok) {
                showError('两次输入的密码不一致！');
                return false;
            }
            // 邮箱验证
            if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)) {
                showError('您输入的电子邮箱格式不正确！');
                return false;
            }
            // 手机号验证
            if (!/^1[3-9]\d{9}$/.test(mobile)) {
                showError('您输入的手机号码格式不正确！');
                return false;
            }
            // 验证码验证 (简单非空验证，后端会再次校验)
            if (vdcode == '') {
                showError('请输入验证码！');
                return false;
            }
            // 如果所有验证都通过，则提交表单
            return true;
        }
        function showError(message) {
            var msgtip = document.getElementById('msgtip');
            msgtip.style.display = 'block';
            msgtip.innerHTML = message;
            // 自动滚动到提示信息
            msgtip.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
    </script>
</body>
</html>

第三步：代码详解与自定义

  1. 文件位置：

    • 将此文件保存为 /templets/member/register.htm，织梦在调用会员注册页面时，会自动寻找这个文件。

  2. 织梦核心标签：

    • {dede:global.cfg_webname/}：获取网站名称，显示在页面标题中。
    • action="{dede:memberurl action='register'}"：这是织梦会员系统的核心标签，它会自动生成会员注册模块的处理地址（通常是 /member/index_do.php），确保表单提交到正确的后台处理脚本。
    • name="dopost" value="regnew"：这是一个隐藏的提交字段，value="regnew" 告诉织梦后台，这个请求是“注册新用户”的操作。
    • src="{dede:global.cfg_cmspath/}/include/vdimgck.php"：这是织梦的验证码图片路径。{dede:global.cfg_cmspath/} 会自动获取您安装织梦时的根目录路径。
    • onclick="this.src='{dede:global.cfg_cmspath/}/include/vdimgck.php?t='+Math.random()"：点击验证码图片时，通过改变 src 参数（加上随机数 t）来强制刷新验证码。
    • href="{dede:memberurl action='login'}"：生成会员登录页面的链接。

  3. 前端验证 (JavaScript)：

    织梦会员注册页面模板
    （图片来源网络，侵删）
    • onsubmit="return checkRegister()"：在表单提交前，先调用 checkRegister() 函数进行前端验证。
    • checkRegister() 函数对用户名、密码、邮箱、手机号等格式进行初步校验。
    • 如果验证失败,会通过 showError() 函数在页面上方显示错误信息，并阻止表单提交 (return false)。
    • 注意：前端验证主要是为了提升用户体验，真正的安全验证必须在后端（即织梦系统）完成，织梦会再次校验所有数据，确保数据的安全性。

  4. 自定义样式和内容：

    • CSS：您可以根据网站的整体风格，修改 <style> 标签中的内容，register-container 的背景色、边框、阴影等，来匹配您的网站设计。
    • Logo：如果您想在标题旁加上Logo，可以在 <h2 class="register-title"> 内添加 <img src="您的Logo地址" alt="Logo">。
    • 字段：如果您需要增加或减少注册字段（如真实姓名、生日等），只需在 <form> 标签内添加或删除对应的 input，并确保后台的“会员模型”中也做了相应配置，织梦默认的字段通常已经够用。

第四步：测试

  1. 将修改好的 register.htm 文件通过FTP上传到您的服务器。
  2. 在浏览器中访问您的网站,并找到“会员注册”的入口链接。
  3. 点击链接,应该就能看到您新设计的注册页面了。
  4. 尝试填写表单,测试前端验证、表单提交、验证码刷新等功能是否正常。

这个模板为您提供了一个功能齐全、设计现代的起点，您可以根据自己的需求进行微调，使其完美融入您的网站。

织梦会员注册页面模板
（图片来源网络，侵删）
-- 展开阅读全文 --
头像
织梦文章图片为何不居中？
« 上一篇 03-02
织梦产品图片尺寸怎么调？
下一篇 » 03-02

相关文章

取消
微信二维码
支付宝二维码

目录[+]