微信小程序开发之表单验证（WxValidate使用）

小灰灰 2022-11-13 06:22 500阅读 0赞

微信小程序的开发框架个人感觉大体上跟VUE是差不多的，但是他的表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般有两种方法，一是自己裸写验证规则，但是需要比较扎实的正则表达式基础，一种是利用官方社区开发的WxValidate插件进行表单验证。

WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。

首先插件的下载地址和官方文档都在WxValidate下载地址和文档地址

具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js

首先引入的方法就是将插件文件拷贝到你所需要的文件目录下  
![70][]

之后可以采用局部引用的方式将插件引入到你所需要的页面的JS文件里，具体操作如下

//index.js页面下
    import WxValidate from '../../utils/WxValidate.js'
    const app = getApp()
    Page({
      data: {
        form: {
          name: '',
          phone: ''
        }
      }
    })

这里需要注意的是文件路径的写法

/是从根目录开始算起 ./是从引入文件的目录文件开始，此例子中就是index.js所在目录开始算起 ../就是从引入文件的父级目录开始算起，此例子中index文件夹目录，而../../就是从pages所在目录开始算起，如果这个地方的文件路径写错，编译就会报错

之后就是注意在wxml文件中对表单组件的数据绑定，否则无论表单组件如何填写，都无法验证规则。

表单组件的绑定方法如下

//wxml页面下
    <form bindsubmit="formSubmit">
        <view class="weui-cells__title">请填写个人信息</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <view class="weui-cell__hd">
              <view class="weui-label">姓名</view>
            </view>
            <view class="weui-cell__bd">
              <input class="weui-input" name='name' value='{
       {form.name}}' placeholder="请输入姓名" />
            </view>
          </view>
          <view class="weui-cell weui-cell_input weui-cell_vcode">
            <view class="weui-cell__hd">
              <view class="weui-label">手机号</view>
            </view>
            <view class="weui-cell__bd">
              <input class="weui-input" name='phone' type='number' value='{
       {form.phone}}' placeholder="请输入手机号" />
            </view>
            </view>
        </view>
    </form>

> 主要的方法就是在需要验证的input框内加入value值的绑定，其他的组件同理

然后在js文件中加入form表单的绑定

//index.js
    Page({
      data: {
        form: {
          name: '',
          phone: ''
        }
      }
    })

然后就是最重要的验证规则的书写了

首先要在onLoad函数中加入验证规则函数

// onLoad中有多个函数的写法，onLoad函数内写函数名，函数在onLoad外定义
    onLoad() {
        this.getuser()
        this.initValidate()//验证规则函数
      }
     
    //onLoad中只有一个函数的写法
    onLoad:function(){
        rules:{}
        messages:{}
        }

> 此处需要注意的是一定要在js文件中onLoad验证规则，否则编译会报checkform is not a function

然后是验证规则和报错规则的代码

//报错 
    showModal(error) {
        wx.showModal({
          content: error.msg,
          showCancel: false,
        })
      },
    //验证函数
    initValidate() {
        const rules = {
          name: {
            required: true,
            minlength:2
          },
          phone:{
            required:true,
            tel:true
          }
        }
        const messages = {
          name: {
            required: '请填写姓名',
            minlength:'请输入正确的名称'
          },
          phone:{
            required:'请填写手机号',
            tel:'请填写正确的手机号'
          }
        }
        this.WxValidate = new WxValidate(rules, messages)
      },
    //调用验证函数
     formSubmit: function(e) {
        console.log('form发生了submit事件，携带的数据为：', e.detail.value)
        const params = e.detail.value
        //校验表单
        if (!this.WxValidate.checkForm(params)) {
          const error = this.WxValidate.errorList[0]
          this.showModal(error)
          return false
        }
        this.showModal({
          msg: '提交成功'
        })
      }

这里我只写了一点字段的验证，官方文档中还包含了很多字段的验证规则，我就不一一写出来了，这里需要注意的是在initValidate（）中要实例化对象，至此表单验证就已经完成了

![演示效果][70 1]

[70]: /images/20221022/f9110d4c0d734f189b2c1d242086c45c.png
[70 1]: /images/20221022/df8847fe73d2400fb18697589cfb6773.png