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

xiaoyantongxue

参考博客：

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

参考：

 

 

 

 

 

 

效果：

 

分类：

技术点：

相关文章：

  • 2022-02-07
  • 2022-02-07
  • 2022-02-07
  • 2021-10-14
  • 2022-02-07
猜你喜欢
  • 2021-12-08
  • 2022-01-19
  • 2022-02-07
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode