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

参考博客：

https://www.cnblogs.com/zhangxiaoyong/p/10166951.html

https://github.com/wux-weapp/wx-extend/blob/master/src/pages/validate/index.js#L1

1：

首先插件的下载地址和官方文档都在WxValidate下载地址和文档地址

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

首先引入的方法就是将插件文件拷贝到你所需要的文件目录下

 2：之后可以采用局部引用的方式将插件引入到你所需要的页面的JS文件里，具体操作如下

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

3：

之后就是注意在wxml文件中对表单组件的数据绑定，否则无论表单组件如何填写，都无法验证规则。

主要的方法就是在需要验证的input框内加入value值的绑定，

表单组件的绑定方法如下：



  class="tip">
    class="iconfont icon-approve">
    身份认证将提高租房成功率！
  
  
"formSubmit">
    
      
      "nickName" value="{{form.nickName}}" />
    
    
      
      "phone" type="text" value="{{form.phone }}" />
    
    
      
      "age" type="number" value="{{form.age}}" />
    
    
    
     
      
      "sex" value="1">
        
        
      
    
     class="uppic">
      ""  bindtap="upfile"/>
      "{{tempFilePaths}}">
     
    class="sendbtn">
      提交信息

4：然后在js文件中加入form表单的绑定

Page({
    data: {
      form: {//增加form子元素
        nickName:'',
        phone:'',
       age:'',
        items: [
          { name: '1', value: '男', checked: 'true' },
          { name: '2', value: '女' }
        ],
       date: '请选择出生年月',
       casArray: ['身份证', '护照', '其他/港澳台居民身份证', '外国人永久居留身份证'],
      },
    },

5：onLoad函数中加入验证规则函数

onLoad() {
      this.initValidate()//验证规则函数
    },

6：验证规则和报错规则的代码

  //报错
 showModal(error) {
      wx.showModal({
        content: error.msg,
        showCancel: false,
      })
    },
//验证函数
    initValidate() {
      const rules = {
        nickName: {
          required: true,
          minlength:2
        },
        phone:{
          required:true,
          tel:true
        },
        age:{
          required:true,
        
        },
        sex:{
          required:true,
        }

      }
      const messages = {
        nickName: {
          required: '请填写姓名',
          minlength:'请输入正确的名称'
        },
        phone:{
          required:'请填写手机号',
          tel:'请填写正确的手机号'
        },
        age:{
          required:'请填写年纪',
        },
        sex:{
          required:'请填写性别',
        }
      }
      this.WxValidate = new WxValidate(rules, messages)
    },
  //调用验证函数
   formSubmit: function(e) {
      console.log('form发生了submit事件，携带的数据为：', e.detail.value)
      const params = e.detail.value
      //校验表单
      if (!this.WxValidate.checkForm(params)) {
        const error = this.WxValidate.errorList[0]
        this.showModal(error)
        return false
      }
      this.showModal({
        msg: '提交成功'
      })
    }

总体js页面：

// pages/my/my.js

import WxValidate from "../../utils/WxValidate";
const app=getApp();
Page({
    data: {
      form: {//增加form子元素
        nickName:'',
        phone:'',
       age:'',
        items: [
          { name: '1', value: '男', checked: 'true' },
          { name: '2', value: '女' }
        ],
       date: '请选择出生年月',
       casArray: ['身份证', '护照', '其他/港澳台居民身份证', '外国人永久居留身份证'],
      },
    },
    onLoad() {
      this.initValidate()//验证规则函数
    },
  
    showModal(error) {
      wx.showModal({
        content: error.msg,
        showCancel: false,
      })
    },
    initValidate() {
      const rules = {
        nickName: {
          required: true,
          minlength:2
        },
        phone:{
          required:true,
          tel:true
        },
        age:{
          required:true,
        
        },
        sex:{
          required:true,
        }

      }
      const messages = {
        nickName: {
          required: '请填写姓名',
          minlength:'请输入正确的名称'
        },
        phone:{
          required:'请填写手机号',
          tel:'请填写正确的手机号'
        },
        age:{
          required:'请填写年纪',
        },
        sex:{
          required:'请填写性别',
        }
      }
      this.WxValidate = new WxValidate(rules, messages)
    },
  //调用验证函数
   formSubmit: function(e) {
      console.log('form发生了submit事件，携带的数据为：', e.detail.value)
      const params = e.detail.value
      //校验表单
      if (!this.WxValidate.checkForm(params)) {
        const error = this.WxValidate.errorList[0]
        this.showModal(error)
        return false
      }
      this.showModal({
        msg: '提交成功'
      })
    }
 
     
    
})

参考页面：

import WxValidate from '../../assets/plugins/wx-validate/WxValidate'

const App = getApp()

Page({
    data: {
        form: {
            gender: '',
            assistance: '',
            email: '',
            tel: '',
            idcard: '',
            password: '',
            confirmPassword: '',
            countryIndex: '',
            slider: '',
            agree: '',
            textarea: '',
        },
        radio: [{
                name: '男',
                value: 'male',
                checked: !1,
            },
            {
                name: '女',
                value: 'female',
            },
        ],
        checkbox: [{
                name: '黄药师',
                value: '0001',
                checked: !1,
            },
            {
                name: '欧阳锋',
                value: '0002',
            },
            {
                name: '段智兴',
                value: '0003',
            },
            {
                name: '洪七公',
                value: '0004',
            },
        ],
        countries: [
            '中国',
            '美国',
            '英国',
        ],
        component: App.components[2],
    },
    onLoad() {
        this.initValidate()
        console.log(this.WxValidate)
    },
    showModal(error) {
        wx.showModal({
            content: error.msg,
            showCancel: false,
        })
    },
    submitForm(e) {
        const params = e.detail.value

        console.log(params)

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

        this.showModal({
            msg: '提交成功',
        })
    },
    initValidate() {
        // 验证字段的规则
        const rules = {
            gender: {
                required: true,
            },
            assistance: {
                required: true,
                assistance: true,
            },
            email: {
                required: true,
                email: true,
            },
            tel: {
                required: true,
                tel: true,
            },
            idcard: {
                required: true,
                idcard: true,
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 15,
            },
            confirmPassword: {
                required: true,
                minlength: 6,
                maxlength: 15,
                equalTo: 'password',
            },
            countryIndex: {
                required: true,
            },
            slider: {
                required: true,
                min: 40,
                max: 80,
            },
            agree: {
                required: true,
            },
            textarea: {
                required: true,
                contains: '自愿',
            },
        }

        // 验证字段的提示信息，若不传则调用默认的信息
        const messages = {
            gender: {
                required: '请选择性别',
            },
            assistance: {
                required: '请勾选1-2个敲码助手',
            },
            email: {
                required: '请输入邮箱',
                email: '请输入正确的邮箱',
            },
            tel: {
                required: '请输入手机号',
                tel: '请输入正确的手机号',
            },
            idcard: {
                required: '请输入身份证号码',
                idcard: '请输入正确的身份证号码',
            },
            password: {
                required: '请输入新密码',
                minlength: '密码长度不少于6位',
                maxlength: '密码长度不多于15位',
            },
            confirmPassword: {
                required: '请输入确认密码',
                minlength: '密码长度不少于6位',
                maxlength: '密码长度不多于15位',
                equalTo: '确认密码和新密码保持一致',
            },
            countryIndex: {
                required: '请选择国家/地区',
            },
            slider: {
                required: '请选择年龄',
                min: '年龄不小于18',
                max: '年龄不大于60',
            },
            agree: {
                required: '请同意我们的声明',
            },
            textarea: {
                required: '请输入文本',
                contains: '请输入文本（必须含有自愿两字）',
            },
        }

        // 创建实例对象
        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个敲码助手')
    },
    radioChange(e) {
        const value = e.detail.value
        const radio = this.data.radio
        const items = radio.map(n => {
            return Object.assign({}, n, {
                checked: n.value === value,
            })
        })
        console.log(items)
        this.setData({
            radio: items,
            'form.gender': value,
        })
    },
    checkboxChange(e) {
        const values = e.detail.value
        const checkbox = this.data.checkbox
        const items = checkbox.map(n => {
            return Object.assign({}, n, {
                checked: values.includes(n.value),
            })
        })
        console.log(items)
        this.setData({
            checkbox: items,
            'form.assistance': values,
        })
    },
    bindCountryChange(e) {
        const value = e.detail.value
        this.setData({
            'form.countryIndex': value,
        })
    },
})

参考：

 

效果：

相关

标签