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

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

//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>

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

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

//报错 
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: '提交成功'
    })
  }