微信小程序开发之表单验证WxValidate使用

2022-04-15 774

微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用官方社区开发的WxValidate插件进行表单验证。

WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。

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

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

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

微信小程序开发之表单验证WxValidate使用

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

//index.js页面下
import WxValidate from '../../utils/WxValidate.js'
const app = getApp()
Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  }
})

这里需要注意的是文件路径的写法

/是从根目录开始算起 ./是从引入文件的目录文件开始,此例子中就是index.js所在目录开始算起 ../就是从引入文件的父级目录开始算起,此例子中index文件夹目录,而../../就是从pages所在目录开始算起,如果这个地方的文件路径写错,编译就会报错

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

表单组件的绑定方法如下

//wxml页面下
<form bindsubmit="formSubmit">
    <view class="weui-cells__title">请填写个人信息</view>
    <view class="weui-cells weui-cells_after-title">
      <view class="weui-cell weui-cell_input">
        <view class="weui-cell__hd">
          <view class="weui-label">姓名</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" name='name' value='{{form.name}}' placeholder="请输入姓名" />
        </view>
      </view>
      <view class="weui-cell weui-cell_input weui-cell_vcode">
        <view class="weui-cell__hd">
          <view class="weui-label">手机号</view>
        </view>
        <view class="weui-cell__bd">
          <input class="weui-input" name='phone' type='number' value='{{form.phone}}' placeholder="请输入手机号" />
        </view>
        </view>
    </view>
</form>

主要的方法就是在需要验证的input框内加入value值的绑定,其他的组件同理

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

//index.js
Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  }
})

然后就是最重要的验证规则的书写了

首先要在onLoad函数中加入验证规则函数

// onLoad中有多个函数的写法,onLoad函数内写函数名,函数在onLoad外定义
onLoad() {
    this.getuser()
    this.initValidate()//验证规则函数
  }
 
//onLoad中只有一个函数的写法
onLoad:function(){
    rules:{}
    messages:{}
    }

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

然后是验证规则和报错规则的代码

//报错 
showModal(error) {
    wx.showModal({
      content: error.msg,
      showCancel: false,
    })
  },
//验证函数
initValidate() {
    const rules = {
      name: {
        required: true,
        minlength:2
      },
      phone:{
        required:true,
        tel:true
      }
    }
    const messages = {
      name: {
        required: '请填写姓名',
        minlength:'请输入正确的名称'
      },
      phone:{
        required:'请填写手机号',
        tel:'请填写正确的手机号'
      }
    }
    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: '提交成功'
    })
  }

 这里我只写了一点字段的验证,官方文档中还包含了很多字段的验证规则,我就不一一写出来了,这里需要注意的是在initValidate()中要实例化对象,至此表单验证就已经完成了

 下面看看演示效果

微信小程序开发之表单验证WxValidate使用

大家还可以自行跑一下在上面下载的实例,里面有更多表单验证的效果

到此这篇关于微信小程序开发之表单验证WxValidate使用的文章就介绍到这了,更多相关小程序表单验证内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

免责声明:
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

NICE源码网 JavaScript 微信小程序开发之表单验证WxValidate使用 https://www.niceym.com/18340.html

常见问题
  • 请您联系网站客服QQ,79024519,将第一时间处理您的问题,咨询请提供会员ID以及资源编号!
查看详情
  • 本站发布的压缩包如遇需要解压密码请尝试本站域名:www.niceym.com (通常为小写,如不对可试试大写) 或者:niceym.com 如遇无法解压,请您提供资源编号发送给本站客服!
查看详情