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()中要实例化对象,至此表单验证就已经完成了
下面看看演示效果
大家还可以自行跑一下在上面下载的实例,里面有更多表单验证的效果













