⼩程序开发之表单验证WxValidate使⽤
小程序开发者社区⼩程序的开发框架个⼈感觉⼤体上跟VUE是差不多的，但是他的表单组件没有⾃带的验证功能，因此开发⼩程序的表单验证时候⼀般有两种⽅法，⼀是⾃⼰裸写验证规则，但是需要⽐较扎实的正则表达式基础，⼀种是利⽤官⽅社区开发的WxValidate插件进⾏表单验证。
WxValidate插件是参考 jQuery Validate 封装的，为⼩程序表单提供了⼀套常⽤的验证规则，包括⼿机号码、电⼦邮件验证等等，同时提供了添加⾃定义校验⽅法，让表单验证变得更简单。
⾸先插件的下载地址和官⽅⽂档都在
具体的WxValidate.js⽂件的位置在////wx-validate/WxValidate.js
⾸先引⼊的⽅法就是将插件⽂件拷贝到你所需要的⽂件⽬录下
之后可以采⽤局部引⽤的⽅式将插件引⼊到你所需要的页⾯的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.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 = List[0]
this.showModal(error)
return false
}
this.showModal({
msg: '提交成功'
})
}
这⾥我只写了⼀点字段的验证，官⽅⽂档中还包含了很多字段的验证规则，我就不⼀⼀写出来了，这⾥需要注意的是在initValidate（）中要实例化对象，⾄此表单验证就已经完成了
下⾯看看演⽰效果
⼤家还可以⾃⾏跑⼀下在上⾯下载的实例，⾥⾯有更多表单验证的效果
到此这篇关于⼩程序开发之表单验证WxValidate使⽤的⽂章就介绍到这了，更多相关⼩程序表单验证内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。