vant Weapp版本没有自带表单校验

自己实现一个简单的rules-form工具类 在utils文件下创建rules-form.js

// 表单校验
/**
 * 规则
 * rules: {
 *  name: [
 *    {
        required: true,
        message: '请输入姓名'
      }
    ],
    mobile: [
      {
        required: true,
        message: '请输入手机'
      },
      {
        pattern: /^1[3-9]\d{9}$/,
        message: '手机号格式错误'
      }
    ]
 * }
 * rules是一个对象  key对应的表单字段， key是一个数组类型，一个输入框可判断多个条件  required判断是否为空，pattern正则判断
 * 注意： rules对象不能放在 页面的data对象中，否则会获取不到正则 请在Page({})外面定义常量
 */
export default function formRules(rules, form, callback) {
  for (let key in rules) {
    const value =
      typeof form[key] == 'number' ? form[key].toString() : form[key]
    const rs = rules[key]
    for (let i = 0; i < rs.length; i++) {
        if (rs[i].required) {
            if (typeof value === 'boolean' && value === false) {
              wx.showToast({
              title: rs[i].message,
              icon: 'none'
            })
              callback(false)
              return
            } else if (typeof value === 'string' && value.trim() == '') {
              wx.showToast({
              title: rs[i].message,
              icon: 'none'
            })
              callback(false)
              return
            }
         } else if (rs[i].pattern && !rs[i].pattern.test(value)) {
            wx.showToast({
              title: rs[i].message,
              icon: 'none'
            })        
            callback(false)
            return
         }
     }
  }
  callback(true)
}

调用方式

例子：

rules = {
  thumb: [{
    required: true,
    message: '请上传头像'
  }],
  name: [{
    required: true,
    message: '请输入姓名'
  }],
  mobile: [{
      required: true,
      message: '请输入手机'
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '手机号格式错误'
    }
  ],
  wxnum: [{
    required: true,
    message: '请输入微信号'
  }],
  email: [{
      required: true,
      message: '请输入邮箱'
    },
    {
      pattern: /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,
      message: '邮箱格式错误'
    }
  ]
Page({
    data:{
        form: {
          thumb: '',
          name: '',
          mobile: '',
          wxnum: '',
          email: '',
          address: '',
          storename: ''
        },
    }

  // 表单提交
  handleFormSubmit() {
    const { form } = this.data
    formRules(rules, form, (status) => {
      if(status) {
        console.log('校验通过')
      }
    })
  },
})