小程序的表单验证之插件

小程序表单验证插件WxValidate
地址https://github.com/skyvow/wx-extend

文件路径：
https://github.com/skyvow/wx-extend/blob/master/src/assets/plugins/wx-validate/WxValidate.js

下载WxValidate.js文件

验证方法：
https://github.com/skyvow/wx-extend/blob/master/docs/components/validate.md

我们使用使用的例子

// 验证字段的规则
const rules = {
    email: {
        required: true,
        email: true,
    },
    tel: {
        required: true,
        tel: true,
    },
    idcard: {
        required: true,
        idcard: true,
    },
}

// 验证字段的提示信息，若不传则调用默认的信息
const messages = {
    email: {
        required: '请输入邮箱',
        email: '请输入正确的邮箱',
    },
    tel: {
        required: '请输入手机号',
        tel: '请输入正确的手机号',
    },
    idcard: {
        required: '请输入身份证号码',
        idcard: '请输入正确的身份证号码',
    },
}

// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)

// 自定义验证规则
this.WxValidate.addMethod('assistance', (value, param) => {
    return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
}, '请勾选1-2个敲码助手')

// 如果有个表单字段的 assistance，则在 rules 中写
assistance: {
    required: true,
    assistance: true,
},

// 调用验证方法，传入参数 e 是 form 表单组件中的数据
submitForm(e) {
    const params = e.detail.value

    console.log(params)

    // 传入表单数据，调用验证方法
    if (!this.WxValidate.checkForm(e)) {
        const error = this.WxValidate.errorList[0]
        return false
    }
},

首先把这个文件放入目录
如下：

我们在需要用插件的js文件中配置：

import WxValidate from "../../utils/WxValidate";

1.list.wxml配置

代码如下：

<form bindsubmit="submitForm">
    <view class="p">
        <text>邮箱：</text>
        <input type="text" name="email"></input>
    </view>
    <view class="p">
        <text>手机号：</text>
        <input type="text" name="tel"></input>
    </view>
    <view class="p">
        <text>身份证：</text>
        <input type="text" name="idcard"></input>
    </view>
    <button formType="submit">登录</button>
</form>

list.js配置


代码如下：

// pages/list/list.js
import WxValidate from "../../utils/WxValidate";
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 验证字段的规则
    const rules = {
      email: {
          required: true,
          email: true,
      },
      tel: {
          required: true,
          tel: true,
      },
      idcard: {
          required: true,
          idcard: true,
      },
    }

    // 验证字段的提示信息，若不传则调用默认的信息
    const messages = {
      email: {
          required: '请输入邮箱',
          email: '请输入正确的邮箱',
      },
      tel: {
          required: '请输入手机号',
          tel: '请输入正确的手机号',
      },
      idcard: {
          required: '请输入身份证号码',
          idcard: '请输入正确的身份证号码',
      },
}
// 创建实例对象
  this.WxValidate = new WxValidate(rules, messages)

  // 自定义验证规则
  this.WxValidate.addMethod('assistance', (value, param) => {
    return this.WxValidate.optional(value) || (value.length >= 1 && value.length <= 2)
  }, '请勾选1-2个敲码助手')


  // 如果有个表单字段的 assistance，则在 rules 中写

  // 调用验证方法，传入参数 e 是 form 表单组件中的数据
  },
    assistance: {
      required: true,
      assistance: true,
    },
  submitForm(e) {
    const params = e.detail.value
  
    console.log(params)
  
    // 传入表单数据，调用验证方法
    if (!this.WxValidate.checkForm(params)) {
        // const error = this.WxValidate.errorList[0]
        const error = this.WxValidate.errorList

        console.log(error)
        return false
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

样式代码：

/* pages/list/list.wxss */
.p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 20rpx;
}

.p input {
  border: 1rpx gray solid;
  width: 400rpx;
}

运行结果：
msg为返回的错误信息
手机号输入错误时