📖知识引入

📋表单：信息的收集站

注册、登录、下单、发帖……都需要用户填信息。输入框+选择器+提交按钮打包在一起，就叫表单——APP的「信息登记处」。

✅校验：把好第一关

手机号必须是11位、密码至少8位、生日不能是未来……用户填完先检查，不合格就别提交。校验是APP的守门员。

💬错误提示要友好

别只说「输入错误」，要说「手机号少了一位，请检查」。指明哪里错、怎么改，用户才不会一遍遍试错到摔手机。

🔒密码框的小圆点

密码输入显示成●●●●，是防止被旁边的人偷看。2026年更常见的是指纹、面容登录——又快又安全。

🔘能选就别让人打字

填生日：翻日历选 vs 手动打字？选国家：列表点选 vs 手写国名？给用户选项比让他打字友好十倍。

💡

表单设计三问：好填吗？错了知道为什么吗？敏感信息安全吗？

🔍一个注册表单的自白

// 一个带校验的输入框
function PhoneInput({ value, onChange }) {
  const isValid = value.length === 11; // 11位才是合法手机号

  return (
    <View>
      <TextInput
        value={value}
        onChangeText={onChange}
        keyboardType="number-pad" // 弹出数字键盘
        placeholder="请输入手机号"
      />
      {/* 只有填过且不合法才提示 */}
      {value.length > 0 && !isValid && (
        <Text style={{ color: "red" }}>
          手机号需要11位，当前只有{value.length}位
        </Text>
      )}
    </View>
  );
}

注册流程的用户体验实录：

❌ 气人版：用户填完10项 → 点提交 → 「输入有误」（哪项错了？不知道 😤） → 用户退出APP，一星差评

✅ 贴心版：每填完一项就检查手机号：「少了一位哦」→ 立刻提示密码：「再设长一点更安全」 → 点提交，一次通过 🎉

贴心版小抄： 1️⃣ 项能减就减（必填才留） 2️⃣ 错误当场说清 3️⃣ 键盘类型匹配（数字键盘输手机号） 4️⃣ 敏感信息用●●●●遮挡

🎯小测验

第1题：「校验」的作用是什么？

第2题：下面哪个错误提示最好？

第3题：让用户填「生日」，更友好的方式是？

📝本课知识点

✓表单是APP的信息登记处
✓校验是提交前的守门员
✓错误提示要指明原因和改法
✓密码用圆点遮挡，支持指纹更佳
✓能选就别打字

第14课完成！继续探索下一课吧 🚀

表单输入

📖知识引入

🔍一个注册表单的自白

🎯小测验

📝本课知识点