小程序使用表单验证（使用WxValidate）记录

最新推荐文章于 2024-02-19 13:27:16 发布

原创最新推荐文章于 2024-02-19 13:27:16 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

28 篇文章

订阅专栏

小程序

22 篇文章

订阅专栏

Javascript

15 篇文章

订阅专栏

本文分享了在微信小程序中使用WxValidate进行表单验证的方法，对比了自定义验证和使用WxValidate的优劣，详细介绍了如何配置和使用WxValidate进行高效表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是废话不多说，解决问题先看表单：
在这里插入图片描述
业务中写了一个预约表单，本来还是先自己写验证，之前自己封装过登录注册的验证，先上一下自己登录注册的写的验证：
login.js

const check = require('../../utils/validate.js')
checkForm() {
    const that = this;
    let loginData = {
      loginName: that.data.loginname
    }
    that.data.passwordType == 0 ? loginData.sms = that.data.sms : loginData.password = that.data.password
    if (check.phoneNumber(loginData.loginName, that.handleWarning)) {
      if (that.data.passwordType == 0) {
        if (check.numberSix(loginData.sms, that.handleWarning)) {
          that.smsLogin()
        }
      } else {
        if (check.password(loginData.password, that.handleWarning)) {
          that.login(loginData.loginName, loginData.password)
        }
      }
    }
  },

validate.js

const phoneNumber = (date, errorr) => {
  if (date) {
    if ((/^1[34578]\d{9}$/.test(date))) {
      return true;
    } else {
      error('请检查手机号')
    }
  } else {
    error('手机号不能为空')
  }
}
const numberSix = (date, error) => {
  if (date) {
    if ((/^\d{6}$/.test(date))) {
      return true;
    } else {
      error('请检查验证码')
    }
  } else {
    error('验证码不能为空')
  }
}
const password = (date, error) => {
  if (date) {
    if ((/^\d{6,}$/.test(date))) {
      return true;
    } else {
      error('请检查密码长度')
    }
  } else {
    error('密码不能为空')
  }
}

module.exports = {
  phoneNumber,
  numberSix,
  password
}

这是当初自己简单写了一个校验，后来发现不是很完善，不适合表单项太多的表单提交，于是还是引用了WxValidate，github地址：https://github.com/skyvow/wx-extend
然后简单说一下怎么用，写过vue之类框架的很容易就可以看懂：
WXML就不放了，就是很简单的样式和form表单

appointment.js

import WxValidate from '../../../utils/WxValidate.js'
var validate;
Page({
  // 初始化表单校验
  initValidate() {
    // 创建实例对象
    this.validate = new WxValidate({
      name: {
        required: true,
        maxlength: 10
      },
      telphone: {
        required: true,
        tel: true
      },
      company: {
        required: true,
        maxlength: 20
      }
    }, {
      name: {
        required: '请输入姓名!',
        maxlength: '姓名不得超过10字!'
      },
      telphone: {
        required: '请输入电话!',
        tel: '电话格式不正确!'
      },
      company: {
        required: '请输入公司名称!',
        maxlength: '姓名不得超过20字!'
      }
    })
  },

  data: {
    name: '',
    telphone: '',
    company: '',
    appointDate: '2018-09-01',
    startTime: '09:01',
    endTime: '10:00'
  },

  onLoad: function(options) {
    this.initValidate()
  },
  
  formSubmit(e) {
    console.log('表单', e.detail.value)
    if (!this.validate.checkForm(e)) {
      const error = this.validate.errorList[0];
      $Message({
        content: `${error.msg} `,
        type: 'warning'
      });
      return false
    }
  }
})

很简单记得把娇艳的规则名称input的name对上，比如：

<input name='name' value='{{name}}' />
<input name='telphone' type='number' value='{{telphone}}' />
<input name='company' value='{{company}}'/>

因为我的表单只有部分必填项，而且3个picker都会有默认选项，所以只需要校验name，telephone和company通过就可以进行提交操作（注意这里没有写之后的提交操作，只写到调验证），提交加在else里面就可以，ok。