小程序验证插件的使用 WxValidate

整个文件可以到git下载

import WxValidate from ‘../../utils/WxValidate’;
地址自己根据目录正确引入

我的需求是所有数据都是动态后台返回的
以下是使用

onload:function(){
    this.initValidate()//验证规则函数
}

 //验证函数
initValidate() {
  const rules = {}
  const messages = {}

  this.data.froms.forEach((item)=>{
    rules[item.name]={
      required:item.isRequired,
      [item.name]:item.isRequired,
    }
    if(item.name==='手机号'){
      messages[item.name]={
        required: '请填写'+item.name,
        [item.name]: '请输入正确的手机号码',
      }
    }else{
      messages[item.name]={
        required: '请填写'+item.name
      }
    }

  })
  console.log(rules)
  console.log(messages)

    this.WxValidate = new WxValidate(rules, messages)
    //这里是自定义验证的格式
    this.WxValidate.addMethod('手机号', (value, param) => {
      console.log(/^1[3456789]\d{9}$/.test(value))
      return /^1[3456789]\d{9}$/.test(value)
    }, '请输入正确的手机号码')

    //邮箱不是必填写的，但是如果填写需要验证格式
    this.WxValidate.addMethod('邮箱', (value, param) => {
      if(value){
        return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)
      }else{
        return true
      }
    }, '请输入正确的邮箱')

},
  //报错 
showModal(error) {
  wx.showModal({
    content: error.msg,
    showCancel: false,
    confirmColor:'#2C2B31',
  })
},
  //提交表单
  formSubmit(e) {
    /**
     * 4-3(表单提交校验)
     */
    console.log(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.submitInfo(params);
  },

  /**
   * 表单-提交
   */
  submitInfo(params) {
    // form提交
    let form = params;
    console.log('将要提交的表单信息：', form);

    wx.showToast({
      title: '提交成功！！！！',
    })
    //报名成功页
    wx.navigateTo({
      url: `/pages/signUp/success/success`
    })
  },