Flask中WTForm输入框绑定input事件时$(this).val()返回空值

你犯了两个关键错误：一是把input事件绑定到了外层div容器上，而div本身没有输入值，所以$(this).val()返回空；二是大概率出现了ID重复——WTForms默认会给生成的input元素分配和字段名一致的ID（也就是start_date），你又给外层div设置了相同ID，这会导致jQuery选择器优先匹配div，进一步加剧问题。

1. 先修正ID重复问题 #

把外层div的ID改成和input不重复的名称，比如start_date-wrap：

<!-- 修改后的HTML结构 -->
<div id="start_date-wrap">
  {{ form.start_date() }}
</div>

2. 绑定事件到正确的input元素 #

直接给WTForms生成的input元素绑定input事件，有两种简单方式：

方式一：通过字段ID直接绑定 #

WTForms生成的input ID就是你的字段名start_date，直接选中它：

$('#start_date').on('input', function() {
  console.log("Hello");
  console.log($(this).val()); // 现在能正常获取输入值
  // 实现正则匹配和DOM更新逻辑
  const dateRegex = /^\d{4}-\d{2}-\d{2}$/; // 示例日期正则，可按需修改
  if (dateRegex.test($(this).val())) {
    $('#start_date-wrap').addClass('valid').text('格式正确');
  } else {
    $('#start_date-wrap').addClass('invalid').text('请输入正确格式的日期');
  }
});

方式二：通过外层容器定位input #

如果不想依赖input的ID，也可以通过外层div找到内部的input：

$('#start_date-wrap input').on('input', function() {
  console.log($(this).val());
  // 同样的正则匹配和DOM更新逻辑
});

测试验证 #

1. 打开浏览器开发者工具，检查HTML结构，确认input和div的ID不重复
2. 输入内容，此时控制台应该能正常打印输入值，正则匹配逻辑也能正常触发

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