微信小程序表单验证-微信小程序清空表单

发布时间：2023-01-25 10:08 浏览次数：次作者：佚名

在做web开发的时候微信小程序表单验证，表单验证插件的前端使用jqueryValidate。由于本人主要专注于后台JAVA开发，为了更好的将插件与后台结合使用，我将所有的表单通过JAVA自定义组件进行了重写。同时再次封装了jqueryValidate，增加了一些新的常用判断，也修改了一些关键字。

小程序也存在验证问题。上网查了一下，发现用的比较多的还是WxValidate。下载地址和使用方法如下

知乎：

但是这个插件使用起来比较麻烦，js需要写很多预设代码，所以我基于这个插件重新封装了。

下面直接说用法，以非空（notEmpty）和长度（size）为例。

1.wxml文件

重要提示：每个表单控件都必须具有 3 个属性和一个特定的样式关键字。

属性

阐明

表单控件的ID

数据验证

需要验证的关键字，多次验证用'|'分隔，例如上面的name需要验证不为空，长度为4-10个字符：

data-validate="notEmpty|size[4,10]"

数据字段名

发生错误时错误消息中显示的表单名称。

风格

阐明

wx验证

指示此表单控件需要验证并且必须写入。

二.js文件

import WxValidate from '../../utils/WxValidate.js'
const util = require('../../utils/util.js')
Page({
  /**
   * 页面的初始数据
   */
  data: {

    date:""   
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    //验证方法
    this.WxValidate = new WxValidate();  
  },
  bindDateChange : function(e){    
    this.setData({date:e.detail.value})
  }, 
  /***调用验证函数***/
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带的数据为：', e.detail.value)
    const params = e.detail.value
    e.detail.value.osscation_address = this.data.osscation_address
    e.detail.value.date = this.data.date
    console.log(e.detail.value)
    console.log(this.WxValidate.rules)

    console.log(this.WxValidate.messages)
    //校验表单
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      util.alert("错误提示",error.msg)
      return false
    }
    //向后台发送时数据 wx.request...    
    util.alert("成功提示", '提交成功 :' + e.detail.value.date)
  }
})