修复:英文标识留空真能自动生成;表单必填前端就地提示不刷新 (#1)

## 问题 1:文案说「留空自动生成」,实际却报错
界面上英文标识写的是「留空自动生成」,且不带红星;但纯中文名
(如「同步日历」)经 slugify 过滤后是空串,服务端照旧报「请填写英文标识」。
文案与行为自相矛盾,用户不明所以。

根因:fb_sw_slugify() 只保留 ASCII,中文全被过滤掉。

修法(不靠加红星了事):给 slugify 加兜底前缀 + 序号
- 软件:中文名 → sw<序号>(如 sw2)
- 分类:中文名 → cat<序号>
- 编辑时留空 = 保持原标识,不因改名把已有网址打散
- 纯英文名行为不变(FeedLite → feedlite)

实测:同步日历 → sw1 / 我的软件 → sw2 / FeedLite → feedlite

## 问题 2:必填项没填,整页刷新才看到错误
原先完全靠服务端校验:提交 → POST → 整页重刷 → 页面顶部弹一条错误。
用户视角就是「什么都没填,页面闪了一下」。

新增 bindInlineValidate()(assets/app.js):
- 给 form 加 data-validate 即启用,零配置
- 就地校验:字段下方显示红框 + 原因,聚焦并滚到可见
- 用户一改动立刻撤掉提示,不一直红着
- 规则取自原生 required / minlength / pattern / type=email

🔴 关键实现细节:用**捕获阶段**监听,并调 stopImmediatePropagation()。
因为 bindNoDoubleSubmit 会在 submit 时禁用按钮 5 秒,若校验排在它之后,
被拦下的表单按钮会被锁住,用户以为点坏了。所以校验必须先跑且拦住它。

## 服务端仍保留兜底
JS 被绕过(禁用脚本、直接构造请求)时,后端照样拒绝空用户名、短口令。

## 顺带收敛资源版本
app.js?v=5 与 style.css?v=N 原先各自写死,已统一到 FB_ASSET_V(升到 11)。
加上前一轮的 layout.php / install.php,现在全站只有 bootstrap.php 一处定义。

验证:
- 标识生成与前端校验专项 21/21
- 全新安装 33/33、老基线 25/25、附件专项 22/22
- 安装向导 60/60、后台管理 30/30
This commit is contained in:
2026-11-01 15:21:27 +08:00
parent b835afcd04
commit 1434a6dfb6
7 changed files with 136 additions and 16 deletions
+84
View File
@@ -611,9 +611,93 @@
}
}
/* ---------- 表单就地校验(不刷新页面,不打扰排版) ----------
* 目标:必填项没填时,在字段下方立刻给出提示并把焦点移过去,
* 而不是先 POST 上去、整页重刷、再在顶部弹一条错误。
* 规则来源:input 上原生 required / minlength / pattern / type=email。
* 用法:给 form 加 data-validate 即可,其余零配置。
*
* ⚠️ 必须在 bindNoDoubleSubmit 之前绑:后者会在 submit 时禁用按钮 5 秒,
* 若校验放在它之后,被拦下的表单按钮会被锁住,用户以为点坏了。
*/
function bindInlineValidate() {
var forms = document.querySelectorAll('form[data-validate]');
for (var i = 0; i < forms.length; i++) {
(function (form) {
form.setAttribute('novalidate', 'novalidate'); // 关掉浏览器默认的整页提示
form.addEventListener('submit', function (ev) {
var bad = null, msg = '';
var fields = form.querySelectorAll('input, textarea, select');
for (var j = 0; j < fields.length; j++) {
var f = fields[j];
if (f.disabled || f.type === 'hidden' || f.type === 'submit') { continue; }
var v = (f.value || '').trim();
msg = '';
if (f.hasAttribute('required') && v === '') {
msg = '这一项必须填写。';
} else if (v !== '' && f.hasAttribute('minlength') &&
v.length < Number(f.getAttribute('minlength'))) {
msg = '至少 ' + f.getAttribute('minlength') + ' 个字符,现在 ' + v.length + ' 个。';
} else if (v !== '' && f.type === 'email' &&
!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(v)) {
msg = '邮箱格式不正确。';
} else if (v !== '' && f.hasAttribute('pattern') &&
!new RegExp('^(?:' + f.getAttribute('pattern') + ')$').test(v)) {
msg = f.getAttribute('data-pattern-msg') || '格式不正确。';
}
if (msg) { bad = f; break; }
}
if (bad) {
ev.preventDefault();
ev.stopImmediatePropagation(); // 拦住后续的"禁用按钮"逻辑
fieldError(bad, msg);
return false;
}
clearAllErrors(form);
}, true); // ★ 捕获阶段:先于 bindNoDoubleSubmit 的冒泡处理
})(forms[i]);
}
}
/** 在字段下显示错误;重复调用只更新文字,不叠加 */
function fieldError(field, msg) {
var wrap = field.closest('.field') || field.parentNode;
if (!wrap) { return; }
wrap.classList.add('has-error');
var tip = wrap.querySelector('.field-error');
if (!tip) {
tip = document.createElement('i');
tip.className = 'field-error';
wrap.appendChild(tip);
}
tip.textContent = msg;
// 卷到可见 + 聚焦,方便直接改
field.focus({ preventScroll: false });
field.scrollIntoView({ block: 'center', behavior: 'smooth' });
// 用户一改就撤掉提示,不要一直红着
var clear = function () {
wrap.classList.remove('has-error');
if (tip && tip.parentNode) { tip.parentNode.removeChild(tip); }
field.removeEventListener('input', clear);
field.removeEventListener('change', clear);
};
field.addEventListener('input', clear);
field.addEventListener('change', clear);
}
function clearAllErrors(form) {
var errs = form.querySelectorAll('.field-error');
for (var i = 0; i < errs.length; i++) {
if (errs[i].parentNode) { errs[i].parentNode.removeChild(errs[i]); }
}
var wraps = form.querySelectorAll('.has-error');
for (var k = 0; k < wraps.length; k++) { wraps[k].classList.remove('has-error'); }
}
function boot() {
bindCaptchaRefresh();
bindAdminToggle();
bindInlineValidate(); // ★ 必须在 bindNoDoubleSubmit 之前
bindNoDoubleSubmit();
bindUploaders();
bindLightbox();