2020年7月1日

微信小程序表单校验WxValidate.js使用(转)


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

首先插件的下载地址和官方文档:https://github.com/skyvow/wx-extend

具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js

1、引入方法:将插件文件拷贝到你所需要的文件目录下

 

2、采用局部引用的方式将插件引入到你所需要的页面的JS文件里,具体操作如下

import WxValidate from '../../utils/WxValidate.js'

3、在wxml文件中对表单组件的数据绑定,否则无论表单组件如何填写,都无法验证规则。表单组件的绑定方法如下

    <view class="issue_item">
      <input focus name="title" value="{{title}}" placeholder='请输入问题描述' />
    </view>

主要的方法就是在需要验证的input框内加入value值的绑定,其他的组件同理

4、验证规则的书写。

在onLoad函数中加入验证规则函数,即验证规则和报错规则的代码

  onLoad: function () {
    // 初始化验证方法
    this.initValidate()
  },
  //报错 
  showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
  //验证函数
  initValidate() {
    const rules = {
      title: {
        required: true,
        maxlength: 128
      },
      dbType: {
        required: true
      },
      priority: {
        required: true
      },
      description: {
        required: true
      }
    }
    const messages = {
      title: {
        required: '请输入问题描述',
        minlength: '最多只能输入128个字符'
      },
      dbType: {
        required: '请选择问题类型'
      },
      priority: {
        required: '请选择问题等级'
      },
      description: {
        required: '请输入问题详情'
      }
    }
    this.WxValidate = new WxValidate(rules, messages)
  },

5、调用校验规则

  submitIssue (e){
    let issueInfo = e.detail.value
    //校验表单
    if (!this.WxValidate.checkForm(issueInfo)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    wx.showLoading({
      title: '玩命加载中',
      mask: true
    })

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732