微信小程序表单验证，WxValidate的使用

已于 2024-03-21 11:54:47 修改
阅读量1.1k 收藏 30
点赞数 30
文章标签： 微信小程序 前端
于 2024-03-21 11:32:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57801078/article/details/136900849
版权

新人，仅记录自己编程中遇到的东西，使用WxValidate之前在网上查了部分博客，关于自定义验证方法写的模模糊糊。最后还是自己摸索出来的。

在小程序开发中有一款常用的表单验证插件：WxValidate.js。该插件是参考jQuery Validate封装的，为小程序提供一套常用的验证规则。

一、github地址

下载地址：GitHub - wux-weapp/wx-extend/wx-validate/WxValidate.js: 微信小程序 - 扩展插件（发送请求、Promise API、表单验证、Restful API）

二、参数说明

参数类型描述
rulesobject验证字段的规则
messagesobject验证字段的提示信息

三：内置校验规则

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

四：常用实例方法

名称返回类型描述
checkForm(e)boolean验证所有字段的规则，返回验证是否通过。
valid()boolean返回验证是否通过。
size()number返回错误信息的个数。
validationErrors()array返回所有错误信息。
addMethod(name, method, message)boolean添加自定义验证方法。

五：使用方法

1.上面的链接下载WxValidate.js放入本地utils目录

2.import导入

找到自己的WxValidate.js的所在目录，../是返回上一级目录，我这里的做了分包所以结构多上去了一级目录。

import WxValidate from "../../../utils/WxValidate";
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    form: {
      name: '',
      contactPhone: '',
      lawManIDcard:'',
      businessImage: [],
      IDcardImages: []
    },
  },
})

3.验证规则的书写

首先要在onLoad函数中加入验证规则函数，然后是验证规则和报错规则的代码。

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

  onLoad(options) {
    this.initValidate();
  },
  //验证函数
  initValidate() {
    const rules = {
      name: {
        required: true,
      },
      contactPhone: {
        required: true,
      },
      lawManIDcard: {
        required: true,
        idcard: true
      },
      businessImage: {
        required: true,
      },
      IDcardImages: {
        required: true,
        IDcardImages: true,
      }
    }
    const messages = {
      name: {
        required: '请填写公司名称',
      },
      contactPhone: {
        required: "请填写联系人手机号",
      },
      lawManIDcard: {
        required: "请填写法人身份证号",
        idcard: "请输入正确身份证号码"
      },
      businessImage: {
        required: "请上传营业执照",
      },
      IDcardImages: {
        required: "请上传身份证正反两面照片",
      }
    }

    this.WxValidate = new WxValidate(rules, messages)
    // 自定义验证规则
    this.WxValidate.addMethod('IDcardImages', (value, param) => {
      return this.WxValidate.optional(value) || value.length == 2
    }, '请上传身份证正反两面照片')

  },

这里我增加了自定义验证规则，我这段addMethod的意思是在他的里面增加了个名叫IDcardImages的验证方法，第二个参数是函数，第三个是错误信息。

rules中的required的意思就不用多说了，按照我自己理解的意思就是调用什么验证方法，required和idcard是它本身自带的验证方法，IDcardImages是我自定义的验证方法。

3.表单提交

wxml中的表单我下面会贴出来，这里直接贴验证方法。

    formSubmit(e) {
        let params = e.detail.value
        console.log(params, '---');
        //这是表单提交方法返回的
        //校验表单
        if (!this.WxValidate.checkForm(params)) {
            const error = this.WxValidate.errorList[0]
            wx.showToast({
                title: error.msg,
                icon: 'none'
            })
            return false
        }
    //通过表单验证执行的操作
    },

六.全部代码

wxml中fc-imageUp为我自己封装的图片上传组件，form中的formSubmit为提交触发方法，需点击formType为submit的button触发。自定义组件的值想通过提交方法去获取，需要在组件内通过wx://form-field使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加name和value属性。关于表单方面的问题在官方自行查阅form相关的文档。

//wxml表单

<!-- 表单 -->
<view class="formBox">
    <form catchsubmit="formSubmit" catchreset="formReset">
        <view class="formItem">
            <view class="label">公司名称:</view>
            <input class="valueBox" name='name' value='{{form.name}}' placeholder="请输入公司名称"/>
        </view>
        <view class="formItem">
            <view class="label">联系人手机号:</view>
            <input class="valueBox" name='contactPhone' value='{{form.contactPhone}}' placeholder="请输入联系人手机号"/>
        </view>
        
        <view class="formItem">
            <view class="label">法人身份证号:</view>
            <input class="valueBox" name='lawManIDcard' value='{{form.lawManIDcard}}' placeholder="请输入法人身份证"/>
        </view>
        <view class="formItem-img">
            <view class="label">营业执照:</view>
            <fc-imageUp name="businessImage" image="{{form.businessImage}}" maxlength="2"
                        binddelImg="delBusinessImage" bindchangeImg="changeBusinessImage"/>
        </view>
        <view class="formItem-img">
            <view class="label">身份证照片:</view>
            <fc-imageUp name="IDcardImages" image="{{form.IDcardImages}}" maxlength="2" binddelImg="delIDcardImages"
                        bindchangeImg="changeIDcardImages"/>
        </view>
        <view>
            <button class="subBtn" type="primary" formType="submit">提交</button>
        </view>
    </form>
</view>
//js
import WxValidate from "../../../utils/WxValidate";

var app = getApp();
Page({
    /**
     * 页面的初始数据
     */
    data: {
        form: {
            name: '',
            contactPhone: '',
            lawManIDcard: '',
            businessImage: [],
            IDcardImages: []
        },
    },
    onLoad(options) {
        this.initValidate();
    },
    //验证函数
    initValidate() {
        const rules = {
            name: {
                required: true,
            },
            contactPhone: {
                required: true,
            },
            lawManIDcard: {
                required: true,
                idcard: true
            },
            businessImage: {
                required: true,
            },
            IDcardImages: {
                required: true,
                IDcardImages: true,
            }
        }
        const messages = {
            name: {
                required: '请填写公司名称',
            },
            contactPhone: {
                required: "请填写联系人手机号",
            },
            lawManIDcard: {
                required: "请填写法人身份证号",
                idcard: "请输入正确身份证号码"
            },
            businessImage: {
                required: "请上传营业执照",
            },
            IDcardImages: {
                required: "请上传身份证正反两面照片",
            }
        }

        this.WxValidate = new WxValidate(rules, messages)
        // 自定义验证规则
        this.WxValidate.addMethod('IDcardImages', (value, param) => {
            return this.WxValidate.optional(value) || value.length == 2
        }, '请上传身份证正反两面照片')

    },
    formSubmit(e) {
        let params = e.detail.value
        console.log(params, '---');
        //这是表单提交方法返回的
        //校验表单
        if (!this.WxValidate.checkForm(params)) {
            const error = this.WxValidate.errorList[0]
            wx.showToast({
                title: error.msg,
                icon: 'none'
            })
            return false
        }
    //通过表单验证执行的操作
    },

})
//wxss  按钮设置为全局变量
.textBold{
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 30rpx;
}
.textL{
  width: 80%;
  font-size: 25rpx;
  color: rgb(112, 112, 112);
  margin: 0 auto;
}
.formBox{
  width: 90%;
  margin: 20rpx auto;
  padding-bottom: 100rpx;
  box-sizing: border-box;
}
.formItem{
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
.formItem-img{
  display: flex;
  /* align-items: center; */
  margin: 20rpx 0;
}
.formItem-img>.label{
  padding-top: 20rpx;
}
.label{
  width: 180rpx;
  margin-right: 20rpx;
  text-align: right;
}
.valueBox{
  padding: 10rpx 20rpx;
  background-color: #E9E9E9;
  flex:1;
  /* border: 2rpx solid rgb(112, 112, 112); */
  border-radius: 10rpx;
}

.subBtn{
  margin-top: 20rpx;
  background-color: var(--themeColor) !important;
}

弥拉i
关注
  • 30
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序表单验证功能完整实例
11-30
本文实例讲述了微信小程序表单验证功能。分享给大家供大家参考，具体如下： Wxml <form bindsubmit="formSubmit" bindreset="formReset"> <input name="name" class="{{whoClass=='name'?'placeholderClass':'inputClass'}}" placeholder="请填写您的姓名" type="text" confirm-type="next" focus="{{whoFocus=='name'?true:false}}" bindblur="nameBlurFocus" /> <
微信小程序表单验证WxValidate的使用
10-15
主要介绍了微信小程序表单验证WxValidate的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序表单验证错误提示效果
08-30
主要为大家详细介绍了微信小程序表单验证错误提示效果，点击确认发布不能为空错误提示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序表单验证.rar
10-19
微信小程序表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般利用官方社区开发的WxValidate插件自己进行表单验证。压缩包中有两个文件，一个是使用说明，一个是js。
微信小程序,使用WxValidate 验证表单
yangwang666的博客
08-06 221
首先先去下载 WxValidate文件js 引入WxValidate.js文件到小程序中 2.js页面里 3.表单触发时间 4.实例化报错信息 5.initValidate 引用 5.验证函数 initValidate 定义 验证规则 和 验证错误提示 ...
【微信小程序】表单验证WxValidate.js使用
十一月廿七风雨大作
07-02 1310
  微信官方是没有提供的，需要我们自己来定义。比较好用的一款第三方表单验证插件是。  下载地址：https://github.com/wux-weapp/wx-extend/tree/master/src/assets/plugins/wx-validate  把放入微信小程序目录下。   在需要进行表单验证的页面引入： 使用步骤 - 2. 配置验证规则   首先要在小程序的data属性里面配置好表单的名字：   wxml页面的input框里面的value值一定要和js里面的声明的对应上,input的na
微信小程序表单验证方式
qq_45121945的博客
04-14 7374
因微信小程序上没有自带表单验证,为了实现和vue的组件库类似于的表单验证,这个时候我们就需要借鉴一个文件WxValidate表单验证的js插件,以下只是做个列子,需要更多验证请往官网文档查看 插件下载地址及官方文档：https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js 1.文件的复制 首先要把WxValidate.js复制到微信.
微信小程序开发之表单验证（WxValidate使用）
热门推荐
Callback的博客
08-24 7万+
微信小程序的开发框架个人感觉大体上跟VUE是差不多的，但是他的表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般有两种方法，一是自己裸写验证规则，但是需要比较扎实的正则表达式基础，一种是利用官方社区开发的WxValidate插件进行表单验证。 WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，...
【微信小程序】表单校验
韩旭不会敲代码吧的博客
12-10 2994
表单校验
WxValidate.js
03-24
小程序表单验证所需要的js，在做小程序的时候，表单验证就相对比较复杂了，这时候需要通过js进行表单验证
微信小程序表单验证插件WxValidate的二次封装功能（终极版）
10-16
主要介绍了微信小程序表单验证插件WxValidate的二次封装功能（终极版），文中给大家提到了最终版与前面2版的不同点,需要的朋友可以参考下
微信小程序表单验证WxValidate使用
xyphf的博客
05-15 1723
请访问 GITHUBhttps://github.com/skyvow/wx-extend 下载WxValidate 使用方法：https://blog.csdn.net/weixin_41041379/article/details/82017301 https://www.cnblogs.com/cisum/p/9556736.html 其他就不废话了，别人都写了 ...
微信小程序表单验证，WxValidate的使用方法
foreverlikui的博客
11-15 2168
先贴上WxValidate的Github地址：WxValidate 第一步，把从github下载的WxValidate.js复制到我们的项目中去。 第二步，在我们需要验证的页面中，引入WxValidate.js 第三部，通过name定义需要验证表单的规则以及提示语，并在onload中加载，此name对应input的name /** * 生命周期函数--监听页面加...
微信小程序表单校验插件WxValidate
m0_58991732的博客
06-20 737
当我们在进行表单开发的时候，我们需要对数据现在前端进行一遍校验，判断其是否符合要求，这不仅避免了非正确数据请求接口照成的响应延迟，也减小了服务器的压力。这一堆代码，写入什么地方呢？这就看个人习惯了，我一般将其写入到utils的文件夹中，在utils文件夹中，新建一个WxValidate.js文件。我们在开发web端项目时，如果使用Element-UI开发的话，Element-UI能够自己设计表达校验规则，不用依赖于第三方的校验库。在page或者component的js/ts文件中，引入。
微信小程序表单验证插件WxValidate
Arbort
03-25 1070
一.下载地址:WxValidate插件地址 通过该地址文档wx-extend/src/assets/plugins/wx-validate/WxValidate.js拷贝WxValidate.js到小程序的utils文件中,如图; 二.使用: 1.引入该插件; import WxValidate from '../../utils/WxValidate.js'; 2.在onL...
微信小程序下表单验证的插件：WxValidate.js
peijiajing的博客
03-30 1625
（1）将WxValidate.js文件复制到utils文件夹中。 （2）将WxValidate.js作为模块载入到需要用到的页面js文件中： A .CommonJS规范： 暴露：module.exports 引入：require() B .ES6规范 暴露：export default 引入：import from C .引入代码：import WxValidate...
[微信小程序]表单正则验证（通用）
最新发布
xxx_holic123的博客
11-13 404
el-input title="处置去向" model:my-value="{{disposeWay}}" placeholder="请填写" errorMessage="{{error.disposeWay}}" onlyRead="{{onlyRead}}"></el-input>2.绑定input或其他组件error.['双向绑定数据名']为message显示。1.添加rules验证规则（仿elementUI）组件封装详情见另外文章。
微信小程序表单验证手机号
10-09
要在微信小程序中进行表单验证手机号，可以使用正则表达式来实现。以下是一个示例代码： ```javascript // 定义手机号正则表达式 const phoneRegExp = /^1[3456789]\d{9}$/; // 表单提交事件 formSubmit: function(e) { const phoneNumber = e.detail.value.phoneNumber; // 验证手机号是否合法 if (!phoneRegExp.test(phoneNumber)) { wx.showToast({ title: "请输入有效的手机号", icon: "none", duration: 2000 }); return; } // 执行其他表单提交逻辑 // ... } ``` 在上述代码中，我们首先定义了一个手机号的正则表达式 `phoneRegExp`，它用于验证手机号的合法性。然后，在表单提交事件中，我们通过 `e.detail.value.phoneNumber` 获取到用户输入的手机号，并使用 `test` 方法对其进行验证。如果手机号不合法，则显示一个提示框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值