小程序表单验证利用WxValidate.js实现表单验证

小灰灰 2021-11-29 04:36 1142阅读 0赞

需求：小程序，个人资料的时候需要进行校验，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

第一步：下载WxValidate.js

第二步：在所需要的页面的js文件中引入

import WxValidate from '../../../utils/WxValidate.js'

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

第三步：wxml里面写上form表单（这个插件必须是表单才可以用，提交按钮也是要在form里面的，form里面的input一定要加name属性，name属性是和js里面对应的）

第三步：写js啦

// pages/addChild/addChild.js
    import WxValidate from '../../../utils/WxValidate.js'
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        form: {
          name: '',
          idcard: '',
          schoolName: '',
          className: '',
          number: ''
        }
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.initValidate()
      },
      //报错
      showModal(error) {
        wx.showModal({
          content: error.msg,
          showCancel: false,
        })
      },
      // 验证函数
      initValidate () {
        const rules = {
          name: {
            required: true,
            minlength: 2
          },
          idcard: {
            required: true,
            idcard: true
          },
          schoolName: {
            required: true
          },
          unit: {
            required: true
          },
          number: {
            digits: true
          }
        }
        const messages = {
          name: {
            required: '请填写姓名',
            minlength: '请输入正确的名称'
          },
          idcard: {
            required: '请填写身份证号',
            idcard: '请填写正确的身份证号'
          },
          schoolName: {
            required: '请填写学校名称'
          },
          unit: {
            required: '请选择年级'
          },
          number: {
            digits: '请填写正确的学号'
          }
        }
        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: '提交成功'
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      }
    })

内置校验规则如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]

报错信息如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]

如有不足，欢迎补充

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20211129/0856ee4476ce433bae9c15d12af99df7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20211129/a4904906659340059328e3d6a0aef220.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: /images/20211129/2e3c5949813c4af0848cdad0d8e56ea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: /images/20211129/8f7574416ef544c5adfd5ea644dfbb8d.png