WordPress站点Bootstrap 5年龄验证模态框Cookie配置问题及'Uncaught ReferenceError: cookie is not defined'错误解决

AI 小北

2026-4-30

解决年龄验证模态框的Cookie错误与逻辑优化

Hey there! 你遇到的Uncaught ReferenceError: cookie is not defined错误很明确——代码里调用的cookie.get()和cookie.set()根本不存在，原生JavaScript或者你当前引入的库都没有这个全局cookie对象。咱们一步步来解决这个问题，顺便优化下逻辑：

问题根源

你假设存在一个cookie工具类，但实际上并没有引入或实现它。原生JS操作Cookie需要自己写方法，或者用成熟的插件。

解决方案1：使用jQuery Cookie插件（简单快捷）

如果你想用类似cookie.get/set的语法，可以引入jQuery Cookie插件，然后直接用它的API：

先在你的脚本前添加插件引用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

然后把代码里的cookie.get('validAge')改成$.cookie('validAge')，cookie.set('validAge', 'true')改成$.cookie('validAge', 'true', { expires: 7 })（最后一个参数是过期时间，这里设7天）。

解决方案2：自己实现原生Cookie读写方法（无需额外插件）

如果不想加新插件，直接写两个简单的函数来处理Cookie：

// 获取Cookie
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 设置Cookie
function setCookie(name, value, days = 7) {
  let expires = "";
  if (days) {
    const date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = `${name}=${value || ""}${expires}; path=/`;
}

然后把代码里的cookie.get('validAge')换成getCookie('validAge')，cookie.set(...)换成setCookie(...)。

额外的逻辑优化

除了Cookie问题，你的代码还有几个小问题需要调整：

一开始的$("#ageModal").modal("show");会强制显示模态框，不管Cookie是否存在，应该删掉这一行；
年龄验证逻辑里用了21岁，但模态框底部提示是18岁，要统一（比如把moment().subtract(21, "years")改成subtract(18, "years")）；
重复调用initAge()，可以整理成只初始化一次；
日期验证可以更严谨（比如判断2月有没有30号等，不过moment.js可以帮忙处理）。

完整修正后的代码

HTML部分（不变，只需添加Cookie插件或原生函数）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<!-- 如果用jQuery Cookie插件，加上这行 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div class="modal fade" id="ageModal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-body">
 <div class="col-xs-12 hidden-sm hidden-md hidden-lg" id="modal-age-limit">
 <h5><strong>Selecciona la fecha de tu cumpleaños</strong></h5>
 </div>
 <div class="row g-3">
 <div class="col">
 <select name="month" class="form-control" id="verify-month">
 <option value="none">-- Mes --</option>
 <option value="1">Enero</option>
 <option value="2">Febrero</option>
 <option value="3">Marzo</option>
 <option value="4">Abril</option>
 <option value="5">Mayo</option>
 <option value="6">Junio</option>
 <option value="7">Julio</option>
 <option value="8">Agosto</option>
 <option value="9">Septiembre</option>
 <option value="10">Octubre</option>
 <option value="11">Noviembre</option>
 <option value="12">Diciembre</option>
 </select>
 </div>
 <div class="col">
 <select name="day" class="form-control" id="verify-day">
 <option value="none">-- Día --</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
 <option value="5">5</option>
 <option value="6">6</option>
 <option value="7">7</option>
 <option value="8">8</option>
 <option value="9">9</option>
 <option value="10">10</option>
 <option value="11">11</option>
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 <option value="26">26</option>
 <option value="27">27</option>
 <option value="28">28</option>
 <option value="29">29</option>
 <option value="30">30</option>
 <option value="31">31</option>
 </select>
 </div>
 <div class="col">
 <select name="Year" class="form-control" id="verify-year">
 <option value="none">-- Año --</option>
 <option value="1933">1933</option>
 <option value="1934">1934</option>
 <option value="1935">1935</option>
 <option value="1936">1936</option>
 <option value="1937">1937</option>
 <option value="1938">1938</option>
 <option value="1939">1939</option>
 <option value="1940">1940</option>
 <option value="1941">1941</option>
 <option value="1942">1942</option>
 <option value="1943">1943</option>
 <option value="1944">1944</option>
 <option value="1945">1945</option>
 <option value="1946">1946</option>
 <option value="1947">1947</option>
 <option value="1948">1948</option>
 <option value="1949">1949</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option>
 <option value="1952">1952</option>
 <option value="1953">1953</option>
 <option value="1954">1954</option>
 <option value="1955">1955</option>
 <option value="1956">1956</option>
 <option value="1957">1957</option>
 <option value="1958">1958</option>
 <option value="1959">1959</option>
 <option value="1960">1960</option>
 <option value="1961">1961</option>
 <option value="1962">1962</option>
 <option value="1963">1963</option>
 <option value="1964">1964</option>
 <option value="1965">1965</option>
 <option value="1966">1966</option>
 <option value="1967">1967</option>
 <option value="1968">1968</option>
 <option value="1969">1969</option>
 <option value="1970">1970</option>
 <option value="1971">1971</option>
 <option value="1972">1972</option>
 <option value="1973">1973</option>
 <option value="1974">1974</option>
 <option value="1975">1975</option>
 <option value="1976">1976</option>
 <option value="1977">1977</option>
 <option value="1978">1978</option>
 <option value="1979">1979</option>
 <option value="1980">1980</option>
 <option value="1981">1981</option>
 <option value="1982">1982</option>
 <option value="1983">1983</option>
 <option value="1984">1984</option>
 <option value="1985">1985</option>
 <option value="1986">1986</option>
 <option value="1987">1987</option>
 <option value="1988">1988</option>
 <option value="1989">1989</option>
 <option value="1990">1990</option>
 <option value="1991">1991</option>
 <option value="1992">1992</option>
 <option value="1993">1993</option>
 <option value="1994">1994</option>
 <option value="1995">1995</option>
 <option value="1996">1996</option>
 <option value="1997">1997</option>
 <option value="1998">1998</option>
 <option value="1999">1999</option>
 <option value="2000">2000</option>
 <option value="2001">2001</option>
 <option value="2002">2002</option>
 <option value="2003">2003</option>
 <option value="2004">2004</option>
 <option value="2005">2005</option>
 <option value="2006">2006</option>
 <option value="2007">2007</option>
 <option value="2008">2008</option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
 <option value="2011">2011</option>
 <option value="2012">2012</option>
 <option value="2013">2013</option>
 <option value="2014">2014</option>
 </select>
 </div>
 <!-- ultimo select -->
 </div><!-- row -->
 </div><!-- modal body -->
 <div class="modal-footer">
 <div class="" id="age-submit-area">
 <a href="#" class="btn btn-success btn-primary" id="age-submit">Enviar</a>
 </div>
 <div class="" id="modal-error" style="visibility: hidden">
 <h4 style=""><strong>Por favor ingresa una fecha valida</strong></h4>
 </div>
 <div class="">
 <h6 class=""><strong>DEBES SER MAYOR DE 18 PARA INGRESAR</strong></h6>
 <p>Allow us to check your age as part of our commitment to responsible drinking.</p>
 </div>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
 <div class="container">
 <h1>hola amigo como estas?</h1>
 </div>

JavaScript部分（用jQuery Cookie插件的版本）

$(document).ready(function () {
 var age = {};
 initAge();

 // Check if cookie for validAge exists
 if ($.cookie('validAge') === 'true') {
   $("#ageModal").modal("hide");
 } else {
   $('#ageModal').modal('show');
 }

 // Starts the age verification process
 function initAge() {
   var month = 0;
   var day = 0;
   var year = 0;

   $("#age-submit").on("click", function (e) {
     e.preventDefault(); // Prevent default link behavior
     age["month"] = $("#verify-month").val();
     age["day"] = $("#verify-day").val();
     age["year"] = $("#verify-year").val();
     checkDate();
   });

   // Add change listeners for selects to reset background
   $("#verify-month, #verify-day, #verify-year").on("change", function () {
     if ($(this).val() === "none") {
       $(this).css("background", "rgba(223,32,44,0.5)");
     } else {
       $(this).css("background", "white");
     }
   });
 }

 // Check to see if user entered a valid date
 function checkDate() {
   let isValid = true;
   $("#modal-error").hide();

   // Reset all backgrounds first
   $("#verify-month, #verify-day, #verify-year").css("background", "white");

   if (age.month === "none" || age.day === "none" || age.year === "none") {
     isValid = false;
     $("#modal-error").fadeIn("slow");

     if (age.month === "none") {
       $("#verify-month").css("background", "rgba(223,32,44,0.5)");
     }
     if (age.day === "none") {
       $("#verify-day").css("background", "rgba(223,32,44,0.5)");
     }
     if (age.year === "none") {
       $("#verify-year").css("background", "rgba(223,32,44,0.5)");
     }
   }

   // Also validate that the date is a real one (e.g., Feb 30 doesn't exist)
   const birthDate = moment(`${age.month}/${age.day}/${age.year}`, "MM/DD/YYYY");
   if (!birthDate.isValid()) {
     isValid = false;
     $("#modal-error").fadeIn("slow");
   }

   if (isValid) {
     oldEnough();
   }
 }

 // Compares age entered with today's date minus 18 years
 function oldEnough() {
   const ageLimit = moment().subtract(18, "years");
   const birthDate = moment(`${age.month}/${age.day}/${age.year}`, "MM/DD/YYYY");
   const isOldEnough = birthDate.isBefore(ageLimit, "day");

   if (isOldEnough) {
     $.cookie('validAge', 'true', { expires: 7, path: '/' });
     $("#ageModal").modal("hide");
   } else {
     $.cookie('validAge', 'false', { expires: 1, path: '/' });
     console.log("User is not old enough");
     // You can add logic here to redirect or show a message
   }
 }
 });

如果不用jQuery Cookie插件，就把上面的JavaScript里的$.cookie换成我们自己写

WordPress站点Bootstrap 5年龄验证模态框Cookie配置问题及'Uncaught ReferenceError: cookie is not defined'错误解决

问题根源 #

解决方案1：使用jQuery Cookie插件（简单快捷） #

解决方案2：自己实现原生Cookie读写方法（无需额外插件） #

额外的逻辑优化 #

完整修正后的代码 #

HTML部分（不变，只需添加Cookie插件或原生函数） #

JavaScript部分（用jQuery Cookie插件的版本） #