小程序容器助力企业在金融与物联网领域实现高效合规运营，带来的新机遇与挑战如何管理？
864
2023-11-12
微信小程序开发之表单验证WxValidate使用
微信小程序的开发框架个人感觉大体上跟VUE是差不多的，但是他的表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般有两种方法，一是自己裸写验证规则，但是需要比较扎实的正则表达式基础，一种是利用官方社区开发的WxValidate插件进行表单验证。
WxValidate插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。
首先插件的-和官方文档都在WxValidate-和文档地址
具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js
首先引入的方法就是将插件文件拷贝到你所需要的文件目录下
之后可以采用局部引用的方式将插件引入到你所需要的页面的JS文件里，具体操作如下
?
1
2
3
4
5
6
7
8
9
10
11
//index.js页面下
import WxValidate from ../../utils/WxValidate.js
const app = getApp()
Page({
data: {
form: {
name: ,
phone:
}
}
})
这里需要注意的是文件路径的写法
/是从根目录开始算起 ./是从引入文件的目录文件开始，此例子中就是index.js所在目录开始算起 ../就是从引入文件的父级目录开始算起，此例子中index文件夹目录，而../../就是从pages所在目录开始算起，如果这个地方的文件路径写错，编译就会报错
之后就是注意在wxml文件中对表单组件的数据绑定，否则无论表单组件如何填写，都无法验证规则。
表单组件的绑定方法如下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//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表单的绑定
然后就是最重要的验证规则的书写了
首先要在onLoad函数中加入验证规则函数
?
1
2
3
4
5
6
7
8
9
10
11
// onLoad中有多个函数的写法，onLoad函数内写函数名，函数在onLoad外定义
onLoad() {
this.getuser()
this.initValidate()//验证规则函数
}
//onLoad中只有一个函数的写法
onLoad:function(){
rules:{}
messages:{}
}
此处需要注意的是一定要在js文件中onLoad验证规则，否则编译会报checkform is not a function
然后是验证规则和报错规则的代码
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//报错
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的使用微信小程序表单验证插件WxValidate的二次封装功能（终极版）微信小程序表单验证form提交错误提示效果微信小程序表单验证功能完整实例微信小程序表单验证错误提示效果微信小程序实现表单验证提交功能
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~