微信小程序表單驗證（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值的綁定，

表單組件的綁定方法如下：

<!--pages/my/my.wxml-->
<view>
  <view class="tip">
    <text class="iconfont icon-approve"></text>
    <text>身份認證將提高租房成功率！</text>
  </view>
  <form bindsubmit="formSubmit">
    <view>
      <label>昵稱</label>
      <input name="nickName" value="{{form.nickName}}" />
    </view>
    <view>
      <label>手機</label>
      <input name="phone" type="text" value="{{form.phone }}" />
    </view>
    <view>
      <label>年齡</label>
      <input name="age" type="number" value="{{form.age}}" />
    </view>
    <view>
    </view>
     <view>
      <label>性別</label>
      <radio-group name="sex" value="1">
        <label class="radio">
          <block wx:if="{{user.sex == '1'}}">
            <radio value="1" checked="{{true}}" />
          </block>
          <block wx:else>
             <radio value="0" />
          </block>
          男
        </label>
        <label class="radio">
          <block wx:if="{{user.sex == '2'}}">
            <radio value="2" checked="{{true}}" />
          </block>
          <block wx:else>
            <radio value="女" />
          </block>
          女
        </label>
      </radio-group>
    </view>
     <view class="uppic">
      <image src=""  bindtap="upfile"/>
      <image src="{{tempFilePaths}}"></image>
    </view> 
    <view class="sendbtn">
      提交信息
      <button type="primary" form-type="submit">提交信息</button>
    </view>
  </form>
</view>

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,
        })
    },
})

參考：

 

 

 

 

 

 

效果：