使用Card.js（无jQuery）实现信用卡表单遇初始化错误求助

1. 输入框ID匹配错误 #

你的JS配置里指定了numberInput: 'input#number'，但HTML中的输入框仅设置了name="number"，缺少id="number"属性，导致插件无法定位到卡号输入框。修改HTML输入框：

<input type="text" name="number" id="number">

2. JS代码执行时机错误 #

如果你的JS代码写在DOM结构加载完成前运行，new Card()会找不到#myform和#con元素，必须确保DOM加载完成后再初始化插件，两种实现方式：

• 方式一：将JS代码放在引入card.js的标签之后：

<div id="con"></div>
<form id="myform">
  <input type="text" name="number" id="number">
</form>
<script src="https://raw.githubusercontent.com/jessepollak/card/master/dist/card.js"></script>
<script>
var card = new Card({
  form: '#myform',
  container: '#con',
  formSelectors: {
    numberInput: 'input#number'
  }
});
</script>

• 方式二：用DOM加载完成事件包裹初始化代码：

document.addEventListener('DOMContentLoaded', function() {
  var card = new Card({
    form: '#myform',
    container: '#con',
    formSelectors: {
      numberInput: 'input#number'
    }
  });
});

3. 容器与表单结构冲突 #

原代码把表单放在了卡片渲染容器#con内部，插件会在该容器中生成信用卡卡片DOM，导致表单与卡片元素混杂，影响正常渲染。需将容器与表单分开：

<!-- 单独的卡片渲染容器 -->
<div id="con"></div>
<!-- 表单区域 -->
<form id="myform">
  <input type="text" name="number" id="number">
</form>

4. 可选：资源加载兼容性问题 #

直接引用raw.githubusercontent的JS文件可能被部分浏览器因MIME类型限制拦截，建议下载card.js到本地目录，再引入本地文件：

<script src="./card.js"></script>

内容的提问来源于stack exchange，提问作者Eslam