如何设置当textarea内容最小长度达20字符时才可提交表单？

• 核心问题是重复绑定点击事件监听器：你封装的blockBtn函数每次被调用时，都会给提交按钮新增一个click事件监听器，旧的监听器不会被自动清除。比如首次输入内容长度不足20时，你绑定了一个阻止提交的监听器，后续输入长度达标后新增的允许提交的监听器，不会覆盖之前的旧监听器，多个监听器同时触发时只要有一个设置了阻止提交，最终就会导致提交失败。
• 额外的小问题：全局变量f、t没有声明，在严格模式下会直接报错。

方案1：保持点击判断逻辑，修复事件绑定问题 #

仅绑定一次点击事件，内部动态判断textarea长度即可：

const message = document.querySelector('#message');
const btn = document.querySelector('.btn');

// 全局只绑定一次点击事件，动态判断提交条件
btn.addEventListener('click', e => {
    const canSubmit = message.value.length >= 20;
    e.returnValue = canSubmit;
    // 如果是表单提交场景，可补充下面的逻辑避免跳转
    // if(!canSubmit) e.preventDefault();
});

// 输入时可以新增实时提示逻辑，不需要重复绑定点击事件
message.addEventListener('input', () => {
    const length = message.value.length;
    console.log(length >=20 ? '满足提交条件' : '字数不足20');
});

方案2（更推荐）：实时控制按钮禁用状态，用户体验更好 #

不需要等用户点击才拦截，不满足条件时按钮直接无法点击，符合常规交互逻辑：

const message = document.querySelector('#message');
const btn = document.querySelector('.btn');

// 封装更新按钮状态的方法
const updateBtnStatus = () => {
    btn.disabled = message.value.length < 20;
};

// 页面加载时初始化按钮状态，满足初始内容为0时无法提交的要求
window.addEventListener('load', updateBtnStatus);
// 输入时实时更新按钮状态
message.addEventListener('input', updateBtnStatus);

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