微信小程序使用WxValidate

微信小程序使用WxValidate

微信小程序原生开发中，部分功能需要用到表单验证，而原生表单组件没有自带表单验证功能。原生开发中，可以裸写验证规则，也可以使用WxValidate插件。

WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括必填元素、手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。

1.引入插件：
插件的下载地址和官方文档：https://github.com/skyvow/wx-extend
WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate下
将插件拷贝到需要的目录下(我一般是放在utils文件夹下）:

2.将WxValidate.js插件引入到需要的js文件中：
import WxValidate from ‘…/…/…/utils/WxValidate’;（文件目录需根据自己的文件地址进行修改）
3.书写验证规则函数：

在这里插入代码片  initValidate: function () {
    // 验证字段的规则
    //trueName phone是wxml中表单组件绑定的字段
    const rules = {
      trueName: {
        required: true,
      },
      phone: {
        required: true,
        tel: true,
      },
    }
    // 验证字段的提示信息，若不传则调用默认的信息
    const messages = {
      trueName: {
        required: '请输入正确的真实姓名',
      },
      phone: {
        required: '请输入电话号码',
        tel: '请输入正确的电话号码',
      },
    }
    // 创建实例对象
    this.WxValidate = new WxValidate(rules, messages)
  },

4.在onLoad页面加载函数中加入验证规则函数：

let that = this;
that.initValidate()

5.在wxml中绑定需要验证的表单组件：

name属性添加需要验证的字段名
 <input placeholder="请输入真实姓名" value="{{trueName}}" name="trueName"></input>