小程序form表单验证

朱雀 2023-01-06 01:17 465阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

"useExtendedLib": {
        "weui": true
      }

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]

"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 是对应的后面的圆的小问号
 *  暂时就想到这么多啦，具体的以后想到再补上

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2021011315334671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20221119/5bc5767167b54d0184fa1fef3d7e6cc8.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html
[useExtendedLib]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib
[npm]: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: /images/20221119/5d5502befc71432ca6d3a8a68d3d173f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210113154002247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70