微信小程序开发之表单验证(WxValidate使用)
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用官方社区开发的WxValidate插件进行表单验证。
WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。
首先插件的下载地址和官方文档都在WxValidate下载地址和文档地址
具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js
首先引入的方法就是将插件文件拷贝到你所需要的文件目录下
之后可以采用局部引用的方式将插件引入到你所需要的页面的JS文件里,具体操作如下
[code]//index.js页面下 import WxValidate from '../../utils/WxValidate.js' const app = getApp() Page({ data: { form: { name: '', phone: '' } } })
这里需要注意的是文件路径的写法
/是从根目录开始算起 ./是从引入文件的目录文件开始,此例子中就是index.js所在目录开始算起 ../就是从引入文件的父级目录开始算起,此例子中index文件夹目录,而../../就是从pages所在目录开始算起,如果这个地方的文件路径写错,编译就会报错
之后就是注意在wxml文件中对表单组件的数据绑定,否则无论表单组件如何填写,都无法验证规则。
表单组件的绑定方法如下
[code]//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表单的绑定
[code]//index.js Page({ data: { form: { name: '', phone: '' } } })
然后就是最重要的验证规则的书写了
首先要在onLoad函数中加入验证规则函数
[code]// onLoad中有多个函数的写法,onLoad函数内写函数名,函数在onLoad外定义 onLoad() { this.getuser() this.initValidate()//验证规则函数 } //onLoad中只有一个函数的写法 onLoad:function(){ rules:{} messages:{} }
此处需要注意的是一定要在js文件中onLoad验证规则,否则编译会报checkform is not a function
然后是验证规则和报错规则的代码
[code]//报错 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()中要实例化对象,至此表单验证就已经完成了
下面看看演示效果
阅读更多大家还可以自行跑一下在上面下载的实例,里面有更多表单验证的效果
- 微信小程序开发--表单验证
- 微信小程序开发(6)-表单数据组件的使用(picker,form,input,button)
- 微信小程序开发—(十四)表单验证2
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序使用sublime开发 高亮&提示
- 快速了解微信小程序的使用,一个根据小程序的框架开发的 todos app
- 微信小程序开发工具使用指南
- 微信小程序开发之不能使用eval函数的问题
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- 微信小程序开发详解(四)---微信小程序开发组件使用初步
- PHP开发中常用的三个表单验证函数使用小结
- 微信小程序开发详解(二)---开发工具使用简介
- 微信小程序开发之——wx.showToast(OBJECT)的使用
- 使用TypeScript开发微信小程序的方法
- 使用野狗做后端,开发微信小程序不需要后端工程师,前端自己就可以搞定了
- 微信小程序开发教程(破解版IDE 无内测资格也可使用)
- 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app
- 微信小程序开发之不能使用eval函数的问题 推荐
- 微信小程序 (应用号)开发(教程)文档,内附开发工具及工具使用方法