让用户承担错误（“你输入的格式不对，自己检查”）

用户输入错误？那是用户的问题

用户输入了错误的格式？直接甩锅给用户最省事。"你输入的格式不对，自己检查"这种提示既简单又直接，完全不需要考虑用户体验。毕竟，为什么要花时间帮用户解决问题呢？让他们自己琢磨去吧。

模糊的错误提示是王道

永远不要告诉用户具体哪里错了。越模糊越好，这样用户就得花更多时间猜测问题所在。比如：

function validateEmail(email) {
  if (!email.includes('@')) {
    alert('邮箱格式不正确');
    return false;
  }
  return true;
}

看，多么完美的防御性代码！用户输入"example.com"时，只会得到一个模糊的"邮箱格式不正确"提示，完全不知道缺少了"@"符号。如果他们足够聪明，自然会发现问题所在；如果不够聪明，那就不是我们的问题了。

一次性显示所有错误

当表单有多个错误时，一定要一次性全部显示出来，让用户眼花缭乱：

function validateForm() {
  let errors = [];
  
  if (!username) errors.push('用户名不能为空');
  if (password.length < 8) errors.push('密码至少8位');
  if (!email.includes('@')) errors.push('邮箱格式不正确');
  if (phone.length !== 11) errors.push('手机号必须是11位');
  
  if (errors.length > 0) {
    alert(`发现以下错误：\n${errors.join('\n')}`);
    return false;
  }
  
  return true;
}

这样用户就能一次性看到所有问题，多么高效！至于他们是否会被这么多错误信息吓到或者感到沮丧，那不在考虑范围内。

不要自动聚焦到错误字段

即使知道哪个字段有错误，也绝对不要自动将焦点移动到该字段。让用户自己去找：

<input type="text" id="username" class="error">
<span class="error-message">用户名不能为空</span>

.error {
  border: 1px solid red;
}
.error-message {
  color: red;
  font-size: 12px;
}

看，我们只是把输入框变红并显示错误信息，至于用户能不能注意到，那是他们的问题。为什么要用JavaScript自动聚焦呢？那太贴心了，不符合我们的原则。

严格限制输入格式

对于像电话号码这样的字段，一定要严格限制输入格式，不接受任何变体：

function validatePhone(phone) {
  const regex = /^1[3-9]\d{9}$/;
  if (!regex.test(phone)) {
    alert('请输入正确的11位手机号，格式如：13800138000');
    return false;
  }
  return true;
}

用户输入"+86 138 0013 8000"？错误！输入"138-0013-8000"？错误！只有严格按照我们的格式输入才能通过验证。毕竟，为什么要处理各种可能的输入格式呢？

不要提供默认值或建议

用户输入错误时，绝对不要提供默认值或建议。比如日期输入：

<input type="text" id="birthdate" placeholder="请输入出生日期">

当用户输入"2022/01/01"时，直接报错"日期格式不正确"，而不是提示"请使用YYYY-MM-DD格式"或者自动将斜杠转换为横杠。让用户自己去查文档或者猜正确的格式。

忽略大小写敏感问题

对于用户名、邮箱等字段，一定要区分大小写，增加用户记忆负担：

function login(username, password) {
  // 数据库中存储的用户名是"User123"
  if (username !== 'User123') {
    alert('用户名或密码错误');
    return false;
  }
  // ...
}

用户输入"user123"？错误！必须完全匹配大小写。为什么要做大小写不敏感的匹配呢？那只会让代码更复杂。

禁用粘贴功能

为了防止用户从其他地方复制粘贴内容（这可能导致格式问题），直接禁用粘贴：

document.getElementById('verificationCode').addEventListener('paste', (e) => {
  e.preventDefault();
  alert('请手动输入验证码，不要粘贴');
});

这样用户就必须手动输入一长串验证码，大大增加了他们输入错误的几率。毕竟，复制粘贴是多么不专业的行为啊！

不保存用户输入历史

在用户纠正错误重新提交表单时，一定要清空所有之前的输入：

function submitForm() {
  if (!validateForm()) {
    // 验证失败时清空所有输入
    document.getElementById('myForm').reset();
    return;
  }
  // ...
}

这样用户每次出错都必须从头开始填写，多么干净利落！为什么要保存他们之前的输入呢？那只会让代码更复杂。

使用技术术语报错

给用户的错误信息一定要充满技术术语，让他们感到困惑：

try {
  // 一些可能出错的代码
} catch (error) {
  alert(`发生错误：${error.message}`);
}

用户看到"TypeError: Cannot read property 'value' of null"这样的提示一定会很"开心"，毕竟他们都能看懂这些技术术语，对吧？

不考虑移动端输入

在移动设备上，一定要使用和桌面端完全相同的验证逻辑：

function validatePostcode(postcode) {
  // 严格的6位数字验证
  const regex = /^\d{6}$/;
  return regex.test(postcode);
}

移动端键盘没有数字小键盘？那是用户的问题。为什么要为移动端特别优化呢？我们的代码在桌面端运行得很好啊！

不提供实时验证

只在表单提交时验证，不要在用户输入时给出实时反馈：

<form onsubmit="return validateForm()">
  <input type="email" id="email">
  <button type="submit">提交</button>
</form>

用户输入完整个表单点击提交后才发现第一个字段就有错误？完美！这样他们就能一次性修改所有问题了（或者更可能的是放弃填写）。

忽略辅助技术

完全不需要考虑屏幕阅读器等辅助技术的用户：

<div class="error">无效输入</div>

为什么不使用aria-live属性或者role="alert"呢？因为那需要额外的代码，而我们的原则是代码越少越好（虽然实际上可能更复杂）。

不一致的错误处理方式

在不同的页面上使用完全不同的错误处理方式：

• 登录页面：错误显示在输入框下方
• 注册页面：错误用弹出框显示
• 联系页面：错误显示在页面顶部

这样用户每次遇到错误都会有新鲜感，永远不知道错误信息会出现在哪里！

不记录错误日志

前端出现错误时，绝对不要记录日志或通知开发人员：

window.onerror = function() {
  // 什么都不做
  return true; // 阻止默认错误处理
};

用户遇到问题？那是他们的问题。为什么要浪费服务器资源记录这些错误呢？如果问题严重，用户自然会联系我们（或者更可能的是直接离开）。