使用Taro搭建微信小程序（第二章-表单开发实践）

辰火流光
1,488 阅读4分钟

本文将探讨如何在Taro框架中创建微信小程序的表单页面，并利用pixiu-number-toolkit库进行数据验证，以提高表单的用户体验和数据质量。

创建Taro页面

首先，我们使用Taro CLI创建一个新的页面。在命令行中输入：

Taro create --name complaint

这个命令会在您的Taro项目中创建一个名为"complaint"的新页面。创建完成后，您将看到新生成的文件，包括complaint.tsx（或complaint.jsx）、complaint.scss和complaint.config.ts。

image.png

设置页面标题

在 complaint.config.ts 文件中，我们可以设置页面的标题：

export default definePageConfig({
  navigationBarTitleText: "我要投诉",
});

这将在小程序顶部导航栏显示"我要投诉"作为页面标题。

构建表单

现在，让我们开始构建表单。我们将使用NutUI的 Form 组件来创建一个包含姓名和联系方式两个字段的表单。

首先，导入必要的组件和函数：

import { View } from "@tarojs/components";
import {
  Button,
  Form,
  FormItemRuleWithoutValidator,
  Input,
} from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";

然后，创建表单结构：

function Index() {
  const handleSubmitSucceed = (values: any) => {
    Taro.showToast({ title: "提交成功", icon: "success" });
  };

  return (
    <View className="wrapper">
      <Form
        divider
        labelPosition="left"
        onFinish={handleSubmitSucceed}
        footer={
          <Button block size="large" nativeType="submit" type="primary">
            提交
          </Button>
        }
      >
        <Form.Item
          label="姓名"
          name="name"
          rules={[{ required: true, message: "请输入姓名" }]}
        >
          <Input placeholder="请输入姓名" type="text" />
        </Form.Item>
        <Form.Item
          label="联系方式"
          name="contact"
          rules={[{ required: true, message: "请输入联系方式" }]}
        >
          <Input placeholder="请输入联系方式" type="text" />
        </Form.Item>
      </Form>
    </View>
  );
}

<Form> 标签属性

  • divider: 这个属性会让表单在每一项之间添加一个分割线。
  • labelPosition="left": 设置表单项标签的位置为左对齐。
  • onFinish={handleSubmitSucceed}: 当表单提交时触发的事件处理器。在这个例子中，当用户点击提交按钮或通过其他方式提交表单时，会调用handleSubmitSucceed函数，该函数会接受一个参数，作用是表单项的值。

footer 属性

  • <Button>: 表单底部的按钮元素，用于提交表单。

    • block: 让按钮占据其父容器的全部宽度。
    • size="large": 设置按钮的大小为大。
    • nativeType="submit": 指定按钮为提交按钮，这将触发表单的提交事件。
    • type="primary": 设置按钮的类型为主要类型，通常具有突出的颜色和样式。

<Form.Item> 标签属性

  • label: 显示在输入字段前的标签文本。
  • name: 输入字段的名称，用于标识表单数据。
  • rules: 验证规则数组，用于控制输入字段的验证逻辑。例如，[{ required: true, message: "请输入姓名" }]表示这个字段是必填的，如果未填写，将显示“请输入姓名”的错误消息。

<Input> 标签属性

  • placeholder: 输入框内的提示文字，当输入框为空时显示。
  • type="text": 指定输入框的类型为文本类型。

我们将微信开发者工具的启动页改为 pages/complaint/complaint

image.png

页面效果如下：

动画.gif

使用pixiu-number-toolkit进行高级验证

虽然我们已经实现了基本的必填验证，但对于姓名和联系方式，我们需要更严格的验证规则。这里我们可以利用pixiu-number-toolkit库提供的验证函数。

地址：www.npmjs.com/package/pix…

首先，安装pixiu-number-toolkit：

npm i pixiu-number-toolkit

然后，我们创建自定义验证函数：

const nameValidator = (_: FormItemRuleWithoutValidator, value: string) => {
  return isValidChineseName(value);
};

const mobileValidator = (_: FormItemRuleWithoutValidator, value: string) => {
  return isValidChineseMobile(value);
};

接下来，将这些验证函数添加到表单项的规则中：

<Form.Item
  label="姓名"
  name="name"
  rules={[
    { required: true, message: "请输入姓名" },
    { validator: nameValidator, message: "姓名格式不正确" },
  ]}
>
  <Input placeholder="请输入姓名" type="text" />
</Form.Item>

<Form.Item
  label="联系方式"
  name="contact"
  rules={[
    { required: true, message: "请输入联系方式" },
    { validator: mobileValidator, message: "联系方式格式不正确" },
  ]}
>
  <Input placeholder="请输入联系方式" type="text" />
</Form.Item>

这样，我们就为表单添加了更严格的验证规则：

  • 姓名必须符合中文姓名的格式
  • 联系方式必须是有效的中国大陆手机号码

pixiu-number-toolkit的优势

使用pixiu-number-toolkit有以下几个明显的优势：

  1. 精确的验证规则：该库提供了针对中文姓名和中国大陆手机号码的精确验证规则，大大提高了数据的准确性。

  2. 易于使用：通过简单的函数调用就能实现复杂的验证逻辑，减少了开发者的工作量。

  3. 轻量级：该库支持按需加载，只引入需要的函数，不会增加太多的包体积。在本例中，编译后的complaint.js文件仅有18KB。 image.png

  4. 持续更新：作为一个专门针对中国市场开发的工具库，pixiu-number-toolkit会持续更新以适应新的需求和规则变化。

在微信开发者工具中的效果：

动画.gif

结论

通过本文，我们学习了如何使用Taro和NutUI创建一个基本的表单，并结合pixiu-number-toolkit实现了更加严格和精确的数据验证。这种方法不仅提高了表单的用户体验，也确保了收集数据的质量。在实际开发中，合理使用这些工具可以大大提高开发效率和产品质量。

希望这篇文章对您在Taro项目中实现高质量表单有所帮助，也欢迎您尝试使用pixiu-number-toolkit来简化您的开发工作。

avatar
文章
阅读
粉丝