微信小程序-表单验证（WxValidate使用）

演示：

插件介绍

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

插件下载

GitHub地址：https://github.com/skyvow/wx-extend/blob/master/docs/components/validate.md

在下载的文件中找到WxValidate.js，其文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js，将它拷贝到你所需要的文件目录下，这边我就放在utils文件下。

插件使用

1）在需要页面的js中引入WxValidate.js：

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

2）页面中对表单组件的绑定：

主要就是对input框加入value值的绑定

  

    
      
        基本信息
      
      
        
        
          
            社团名称
            *
          
          
            
          
        
        
        
          
            社团地址
            *
          
          
            {{osscation_address}}
            
          
        
        
        
          
            成立时间
            *
          
          
            
              
                {{date}}
                
              
            
          
        
      
      
      
        
        
          
            公司名称
            *
          
          
            
          
        
        
        
          
            联系人
            *
          
          
            {{ossicationName}}
            
          
        
        
        
          
            职位
            *
          
          
            {{ossicationCreateTime}}
            
          
        
        
        
          
            联系电话
            *
          
          
            {{ossicationCreateTime}}
            
          
        
        
        
          
            邮箱
          
          
            {{ossicationCreateTime}}
            
          
        
      

    
      
    
       发布
     
  

3）在js中加入加入form表单的绑定

data{
    form: {
      name: '',
      osscation_address: '',
      date:'',
      companyName: '',
      linkman: '',
      position: '',
      phone: '',
      email: '',   
      license:'',
      dentityCard: '',
      videoUrl:'',
    }
}

4)验证方法

注意的是一定要在js文件中onLoad验证规则，否则编译会报checkform is not a function 

注意 WxValidate(rules, messages)中实例化的参数：

参数说明

参数	类型	描述
rules	object	验证字段的规则
messages	object	验证字段的提示信息

onLoad: function (options) {
   //验证方法
    this.initValidate();
  },

  /***验证表单字段 */
  initValidate:function(){
    const rules = {
      name: {
        required: true,
        maxlength: 10,
      },
      osscation_address: {
        required: true,
      },
      date: {
        required: true,
      },
      companyName: {
        required: true,
      },
      linkman:{
        required: true,
      },
      position: {
        required: true,
      },
      phone: {
        required: true,
        tel: true
      },
      email: {
        email: true
      },
      license: {
        required: true,
      },
      dentityCard: {
        required: true,
        idcard: true
      },
      videoUrl:{
        url: true
      },
     

    }
    const messages = {
      name: {
        required: '请填写社团名称',
        maxlength: '社团名称长度不超过10个字！'
      },
      osscation_address: {
        required: '请选择社团地址',
      },
      date: {
        required: '请选择成立时间',
      },
      companyName: {
        required: '请填写公司名称',
      },
      linkman: {
        required: '请填写联系人',
      },
      position: {
        required: '请填写职位',
      },
      phone: {
        required: '请填写联系电话',
        tel: '请填写正确的联系电话'
      },
      email: {
        email: '请填写正确的邮箱地址'
      },
      license: {
        required: '请填写营业执照',
      },
      dentityCard: {
        required: '请填写身份证号码',
        idcard: '请输入正确的身份证号码'
      },
      videoUrl: {
        url: '请填写正确的视频地址'
      },
      
    }
    this.WxValidate = new WxValidate(rules, messages)
  },

  /***调用验证函数***/
 formSubmit: function (e) {
    console.log('form发生了submit事件，携带的数据为：', e.detail.value)
    const params = e.detail.value
     e.detail.value.osscation_address = this.data.osscation_address
     e.detail.value.date = this.data.date
     console.log(e.detail.value)
    //校验表单
    if (!this.WxValidate.checkForm(params)) {
      const error = this.WxValidate.errorList[0]
      this.showModal(error)
      return false
    }
    //向后台发送时数据 wx.request...

    // this.showModal({
    //   msg: '提交成功'
    // })
 },
 
  /***报错 **/
  showModal(error) {
     wx.showModal({
       content: error.msg
     })
  },

内置校验规则说明：

序号	规则	描述
1	required: true	这是必填字段。
2	email: true	请输入有效的电子邮件地址。
3	tel: true	请输入11位的手机号码。
4	url: true	请输入有效的网址。
5	date: true	请输入有效的日期。
6	dateISO: true	请输入有效的日期（ISO），例如：2009-06-23，1998/01/22。
7	number: true	请输入有效的数字。
8	digits: true	只能输入数字。
9	idcard: true	请输入18位的有效身份证。
10	equalTo: 'field'	输入值必须和 field 相同。
11	contains: 'ABC'	输入值必须包含 ABC。
12	minlength: 5	最少要输入 5 个字符。
13	maxlength: 10	最多可以输入 10 个字符。
14	rangelength: [5, 10]	请输入长度在 5 到 10 之间的字符。
15	min: 5	请输入不小于 5 的数值。
16	max: 10	请输入不大于 10 的数值。
17	range: [5, 10]	请输入范围在 5 到 10 之间的数值。