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

最新推荐文章于 2021-08-06 13:09:08 发布

漩涡中的蚂蚁

最新推荐文章于 2021-08-06 13:09:08 发布

阅读量2.8k

点赞数 3

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/m0_37626203/article/details/104391522

版权

微信小程序原生form组件不包含表单验证功能。通过引用WxValidate插件，可以实现这一功能。需从Gitee下载WxValidate.js文件并引入到小程序项目中，在onLoad方法中初始化验证对象。此外，介绍了自定义验证规则和不同加载方式的可能性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接说，这个是我剽窃的（但是，我又按照我的需要重新写一下）。剽窃地址：https://blog.youkuaiyun.com/weixin_41041379/article/details/82017301

微信小程序在form组件中并没有表单验证这些功能。我上网找了一下，找到上述地址上的表单验证。

首先：插件下载地址与文档都放到了getee上：WxValidate 文档与资源地址自行下载就好。

步骤：

在gitee上下载需要的文件，并且放到你想要放到的目录中。注意：在此，如果你只是进行表单验证，你只要WxValidate.js文件就好了。
页面中调用：微信小程序给出了引入模块的方式。但是，抱歉。此处需要使用import；
```
import WxValidate from "../../utils/WxValidate.js";
```

初始化WxValidate 对象；必须在onload方法中进行初始化，否则加载失败。

  /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
      this.initValidate();
   },  
 /**
    * 表单验证的初始化
    */
   initValidate: function(){
      //验证字段的规则
      const rules = {
         username: {