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

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

浏览量:844 时间: 来源:酒香飘在巷子里
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用官方社区开发的WxValidate插件进行表单验证。
WxValidate插件是参考jQueryValidate封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。
首先插件的下载地址和官方文档都在
具体的WxValidate.js文件的位置在////wx-validate/WxValidate.js
首先引入的方法就是将插件文件拷贝到你所需要的文件目录下

之后可以采用局部引用的方式将插件引入到你所需要的页面的JS文件里,具体操作如下
//index.js页面下importWxValidatefrom'../../utils/WxValidate.js'constapp=getApp()Page({data:{form:{name:'',phone:''}}})这里需要注意的是文件路径的写法
/是从根目录开始算起./是从引入文件的目录文件开始,此例子中就是index.js所在目录开始算起../就是从引入文件的父级目录开始算起,此例子中index文件夹目录,而../../就是从pages所在目录开始算起,如果这个地方的文件路径写错,编译就会报错
之后就是注意在wxml文件中对表单组件的数据绑定,否则无论表单组件如何填写,都无法验证规则。
表单组件的绑定方法如下
//wxml页面下formbindsubmit="formSubmit"view请填写个人信息/viewviewviewviewview姓名/view/viewviewinputname='name'value='{{form.name}}'placeholder="请输入姓名"//view/viewviewviewview手机号/view/viewviewinputname='phone'type='number'value='{{form.phone}}'placeholder="请输入手机号"//view/view/view/form主要的方法就是在需要验证的input框内加入value值的绑定,其他的组件同理
然后在js文件中加入form表单的绑定
//index.jsPage({data:{form:{name:'',phone:''}}})然后就是最重要的验证规则的书写了
首先要在onLoad函数中加入验证规则函数
//onLoad中有多个函数的写法,onLoad函数内写函数名,函数在onLoad外定义onLoad(){this.getuser()this.initValidate()//验证规则函数}//onLoad中只有一个函数的写法onLoad:function(){rules:{}messages:{}}此处需要注意的是一定要在js文件中onLoad验证规则,否则编译会报checkformisnotafunction
然后是验证规则和报错规则的代码
//报错showModal(error){wx.showModal({content:error.msg,showCancel:false,})},//验证函数initValidate(){construles={name:{required:true,minlength:2},phone:{required:true,tel:true}}constmessages={name:{required:'请填写姓名',minlength:'请输入正确的名称'},phone:{required:'请填写手机号',tel:'请填写正确的手机号'}}this.WxValidate=newWxValidate(rules,messages)},//调用验证函数formSubmit:function(e){console.log('form发生了submit事件,携带的数据为:',e.detail.value)constparams=e.detail.value//校验表单if(!this.WxValidate.checkForm(params)){consterror=this.WxValidate.errorList[0]this.showModal(error)returnfalse}this.showModal({msg:'提交成功'})}这里我只写了一点字段的验证,官方文档中还包含了很多字段的验证规则,我就不一一写出来了,这里需要注意的是在initValidate()中要实例化对象,至此表单验证就已经完成了
下面看看演示效果

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎