小程序form表单验证

最新推荐文章于 2025-05-04 15:41:37 发布

Hero_rong

最新推荐文章于 2025-05-04 15:41:37 发布

阅读量2.7k

点赞数 2

分类专栏：小程序 Weui

本文链接：https://blog.csdn.net/Hero_rong/article/details/112568670

版权

小程序同时被 2 个专栏收录

55 篇文章

订阅专栏

Weui

5 篇文章

订阅专栏

博客介绍了小程序引入weui组件库的方法，可通过useExtendedLib扩展库方式引入，此方式组件不计入代码包大小，也能通过npm方式下载构建。还说明了引入扩展库在app.json文件添加内容、在页面导入插件、加入组件等步骤，以及部分代码的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一张图是官方给的效果图，官方链接戳这里，是用小程序自带的weui组件库，我这里是通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小，也可以通过 npm 方式下载构建，npm包名为weui-miniprogram

（前三步都是基础，如果知道怎么使用，只想看一些小提示的，可以从第四步开始）

1.先引入 useExtendedLib 扩展库，在 app.json 文件里面加入

  "useExtendedLib": {
    "weui": true
  }

2.在需要使用的页面，导入需要使用的插件

    "usingComponents": {
      "mp-toptips": "weui-miniprogram/toptips/toptips",
      "mp-cells": "weui-miniprogram/cells/cells",
      "mp-cell": "weui-miniprogram/cell/cell",
      "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
      "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
      "mp-form": "weui-miniprogram/form/form"
    }

3.需要的页面，加入组件

  <mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>
  <mp-form id="form" rules="{{rules}}" models="{{formData}}">
    <mp-cells title="">
      <mp-cell show-error prop="chickenpoxNum" title="" ext-class="">
        <view>1. 水痘</view>
        <input bindinput="formInputChange" type="number" data-field="chickenpoxNum" class="weui-input" placeholder="请输入水痘的人数" />
      </mp-cell>
    </mp-cells>
    <mp-cells title="">
      <mp-cell show-error prop="handfootmouthNum" title="" ext-class="">
        <view>2. 手足口</view>
        <input bindinput="formInputChange" type="number" data-field="handfootmouthNum" class="weui-input" placeholder="请输入手足口的人数" />
      </mp-cell>
    </mp-cells>
    <mp-cells title="">
      <mp-cell show-error prop="mumpsNum" title="" ext-class="">
        <view>3. 腮腺炎</view>
        <input bindinput="formInputChange" type="number" data-field="mumpsNum" class="weui-input" placeholder="请输入腮腺炎的人数" />
      </mp-cell>
    </mp-cells>

  </mp-form>
  <view class="weui-btn-area">
    <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
  </view>

4.使用注意事项

<mp-toptips msg="{{error}}" type="error" show="{{error}}"></mp-toptips>这行代码是页面上弹出来的红色框框
<mp-cell show-error prop="chickenpoxNum" title="" ext-class=""> 这里面的 show-error 是对应的后面的圆的小问号
暂时就想到这么多啦，具体的以后想到再补上