微信小程序使用WxValidate
微信小程序原生开发中,部分功能需要用到表单验证,而原生表单组件没有自带表单验证功能。原生开发中,可以裸写验证规则,也可以使用WxValidate插件。
WxValidate插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括必填元素、手机号码、电子邮件验证等等,同时提供了添加自定义校验方法,让表单验证变得更简单。
1.引入插件:
插件的下载地址和官方文档:https://github.com/skyvow/wx-extend
WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate下
将插件拷贝到需要的目录下(我一般是放在utils文件夹下):
2.将WxValidate.js插件引入到需要的js文件中:
import WxValidate from ‘…/…/…/utils/WxValidate’;(文件目录需根据自己的文件地址进行修改)
3.书写验证规则函数:
在这里插入代码片 initValidate: function () {
// 验证字段的规则
//trueName phone是wxml中表单组件绑定的字段
const rules = {
trueName: {
required: true,
},
phone: {
required: true,
tel: true,
},
}
// 验证字段的提示信息,若不传则调用默认的信息
const messages = {
trueName: {
required: '请输入正确的真实姓名',
},
phone: {
required: '请输入电话号码',
tel: '请输入正确的电话号码',
},
}
// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)
},
4.在onLoad页面加载函数中加入验证规则函数:
let that = this;
that.initValidate()
5.在wxml中绑定需要验证的表单组件:
name属性添加需要验证的字段名
<input placeholder="请输入真实姓名" value="{{trueName}}" name="trueName"></input>