织梦js手机号验证如何实现?

99ANYc3cd6
预计阅读时长 20 分钟
位置: 首页 织梦建站 正文

核心思路

手机号码验证的核心是使用正则表达式来匹配符合中国大陆手机号规则的字符串,一个标准的正则表达式可以确保:

织梦js手机号码验证
(图片来源网络,侵删)
  1. 长度为11位。
  2. 1 开头。
  3. 第二位是特定数字(目前是 3, 4, 5, 6, 7, 8, 9)。
  4. 后面9位是数字。

一个常用且比较完善的正则表达式是: /^1[3-9]\d{9}$/

  • ^:匹配字符串的开始。
  • 1:第一位必须是数字1。
  • [3-9]:第二位是3到9之间的任意一个数字。
  • \d{9}:后面是9位任意数字(\d代表数字,{9}代表重复9次)。
  • 匹配字符串的结束。

在任意HTML页面中直接使用(最简单)

这种方法适用于织梦的后台表单(如会员注册、投稿表单)或你手动添加的HTML页面。

步骤:

  1. 在你的HTML表单中,为手机号输入框添加一个 idtelphone
  2. 在表单的 <form> 标签内添加一个提交按钮。
  3. 在页面底部 <body> 标签结束前,加入 <script> 标签,编写验证逻辑。

示例代码:

织梦js手机号码验证
(图片来源网络,侵删)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">织梦手机号验证示例</title>
</head>
<body>
    <h2>用户注册</h2>
    <form id="regForm" action="submit.php" method="post" onsubmit="return checkForm()">
        <p>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </p>
        <p>
            <label for="telphone">手机号码:</label>
            <input type="text" id="telphone" name="telphone" placeholder="请输入11位手机号" required>
        </p>
        <p>
            <button type="submit">提交注册</button>
        </p>
    </form>
    <script>
        function checkForm() {
            // 1. 获取手机号输入框的值
            var telphoneInput = document.getElementById('telphone');
            var telphoneValue = telphoneInput.value.trim(); // 去掉前后空格
            // 2. 定义手机号正则表达式
            var telphoneRegex = /^1[3-9]\d{9}$/;
            // 3. 进行验证
            if (!telphoneRegex.test(telphoneValue)) {
                // 如果验证失败
                alert('请输入正确的11位手机号码!');
                telphoneInput.focus(); // 让输入框获得焦点
                return false; // 阻止表单提交
            }
            // 验证通过,可以提交表单
            return true;
        }
    </script>
</body>
</html>

代码解释:

  • onsubmit="return checkForm()":这是表单的关键属性,当用户点击提交按钮时,会先执行 checkForm() 函数。
  • checkForm() 函数返回 true 时,表单正常提交;返回 false 时,表单提交被阻止。
  • document.getElementById('telphone'):通过ID找到手机号输入框。
  • .trim():非常重要,用于清除用户输入时可能无意添加的空格。
  • .test():正则表达式的方法,用来检测一个字符串是否匹配某个模式,返回 truefalse
  • alert():弹出提示框,告知用户错误信息。
  • focus():让出错的输入框重新获得焦点,方便用户修改。

创建可复用的织梦全局JS文件(推荐)

如果你的网站多个页面都需要用到手机号验证,或者想在织梦的任意地方方便地调用,最好创建一个全局的JS文件。

步骤:

  1. 创建JS文件: 在你的织梦模板目录(通常是 /templets/default/ 或你自定义的模板文件夹)下,创建一个名为 common.js 的文件。

    织梦js手机号码验证
    (图片来源网络,侵删)
  2. 编写验证函数: 打开 common.js 文件,写入以下代码:

    // common.js
    /**
     * 验证手机号码
     * @param {string} telphone - 需要验证的手机号字符串
     * @returns {boolean} - 返回 true 表示验证通过,false 表示验证失败
     */
    function checkTelphone(telphone) {
        var telphoneRegex = /^1[3-9]\d{9}$/;
        return telphoneRegex.test(telphone);
    }
    /**
     * 带有提示的表单验证函数
     * @param {string} formId - 表单的ID
     * @param {string} inputId - 手机号输入框的ID
     * @param {string} errorMsg - 验证失败时显示的错误信息
     * @returns {boolean}
     */
    function validateTelphoneForm(formId, inputId, errorMsg) {
        var telphoneInput = document.getElementById(inputId);
        var telphoneValue = telphoneInput.value.trim();
        if (!checkTelphone(telphoneValue)) {
            alert(errorMsg || '请输入正确的11位手机号码!');
            telphoneInput.focus();
            return false;
        }
        return true;
    }
  3. 在织梦模板中引入并使用: 在你的织梦模板文件(如 head.htm 或需要使用的具体页面模板)的 <head><body> 标签内,引入这个JS文件。

    {dede:include filename="head.htm"/}
    <!-- 或者在当前页面的底部 -->
    <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/common.js"></script>
  4. 在表单中调用: 现在你的HTML表单可以变得非常简洁。

    <form id="regForm" action="submit.php" method="post" onsubmit="return validateTelphoneForm('regForm', 'telphone', '手机号格式不正确,请重新输入!')">
        <p>
            <label for="telphone">手机号码:</label>
            <input type="text" id="telphone" name="telphone" required>
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>

优点

  • 代码复用:一次编写,处处可用。
  • 维护方便:如果需要修改验证规则,只需修改 common.js 一个文件。
  • 逻辑清晰:将验证逻辑和页面HTML分离,更易于管理和维护。

针对织梦会员注册/登录的修改

织梦自带的会员系统有自己的一套验证逻辑,如果你想在会员注册页面增加或修改手机号验证,你需要修改织梦的核心文件。

⚠️ 警告: 修改核心文件意味着在下次织梦升级时,你的修改可能会被覆盖。强烈建议先备份文件

修改步骤(以会员注册 reg_new.php 为例):

  1. 找到并打开文件/member/reg_new.php

  2. 定位验证逻辑: 在文件中搜索 $dopost == "regnew" 或类似的关键字,找到处理注册数据的代码段。

  3. 添加手机号验证: 在对用户名、密码等进行验证之后,添加你自己的手机号验证代码。

    // ... 其他验证代码 ...
    // --- 新增:手机号验证 ---
    if(empty($msg))
    {
        $mobile = isset($mobile) ? trim($mobile) : '';
        if(empty($mobile))
        {
            $msg = '手机号码不能为空!';
        }
        else if(!preg_match("/^1[3-9]\d{9}$/", $mobile))
        {
            $msg = '手机号码格式不正确!';
        }
    }
    // --- 新增结束 ---
    // 如果有错误,则返回注册页面并显示错误信息
    if($msg != '')
    {
        showMsg($msg, '-1');
        exit();
    }
    // ... 如果没有错误,继续执行入库操作 ...
  4. 修改模板文件(可选): 你可能还需要修改会员注册模板 /templets/default/reg_new.htm,确保 <input name="mobile" ...> 存在,并可以加上HTML5的 pattern 属性作为前端初步验证。

    <input type="text" name="mobile" id="mobile" placeholder="请输入您的手机号" pattern="^1[3-9]\d{9}$" />
  • 简单页面/自定义表单:使用方法一方法二,推荐方法二
  • 修改织梦原生功能(如会员注册):使用方法三,但务必小心。

希望这些方法能帮助你在织梦项目中完美实现手机号验证功能!

-- 展开阅读全文 --
头像
dede手机模板怎么生成?
« 上一篇 02-18
dede前台会员如何上传图片?
下一篇 » 02-18

相关文章

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

目录[+]