签名板校验为空时报错：Uncaught ReferenceError: signaturePad is not defined

Hey there, let's break down why you're hitting this error and fix it step by step.

问题根源：变量作用域限制 #

你在jQuery(document).ready()函数内部用var声明了signaturePad，这意味着这个变量只在ready函数的局部作用域内有效。而你的全局submit()函数尝试访问它时，根本找不到这个变量，所以抛出了引用错误。

解决方案1：提升变量到全局作用域 #

最简单的修改是把signaturePad的声明移到ready函数外面，让它成为全局变量：

// 在全局作用域提前声明变量
var signaturePad;

jQuery(document).ready(function () { 
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas'); 
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth(); 
  signaturePadCanvas.setAttribute("width", parentWidth); 
  // 直接赋值给全局变量，不再用var
  signaturePad = new SignaturePad(signaturePadCanvas); 
}); 

function submit() { 
  // 现在能正常访问全局的signaturePad了
  if (signaturePad.isEmpty()) { 
    console.log("Empty!");
    // 替换成你的空校验提示逻辑，比如：
    alert("请先完成签名再提交！");
  }
}

解决方案2：使用事件绑定（更推荐） #

全局函数和全局变量容易导致代码冲突，更规范的做法是在ready函数内部直接绑定按钮的点击事件，这样可以直接访问局部的signaturePad变量：

修改后的JavaScript代码：

jQuery(document).ready(function () { 
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas'); 
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth(); 
  signaturePadCanvas.setAttribute("width", parentWidth); 
  var signaturePad = new SignaturePad(signaturePadCanvas); 

  // 直接在局部作用域绑定按钮点击事件
  jQuery('button').on('click', function() {
    if (signaturePad.isEmpty()) { 
      console.log("Empty!");
      alert("请先完成签名再提交！");
    } else {
      // 签名有效时的提交逻辑
      console.log("签名已完成，准备提交");
      // 这里可以添加表单提交或其他处理
    }
  });
}); 

修改后的HTML代码（移除全局onClick）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script> 
<div class="signature-pad-canvas-wrapper"> 
  <canvas id="signature-pad-canvas"></canvas> 
  <button>Submit</button> 
</div>

额外检查 #

如果修改后还是有问题，先确认：

• SignaturePad库是否成功加载（打开浏览器控制台，查看Network标签，确保没有404错误）
• canvas元素的ID是否和JS中的选择器一致（#signature-pad-canvas）

内容的提问来源于stack exchange，提问作者Mr. Jo