WxValidate.js
( 用于表单验证 ) 下载地址
文档地址
表单
<!-- 表单 -->
<form bindsubmit="formBindsubmit" bindreset="formReset">
<view style="display:flex;">
<label>商品名称:</label>
<input name="name" placeholder="请输入商品名称" />
</view>
<view style="display:flex;">
<label>商品描述:</label>
<input name="describe" placeholder="请输入商品描述"/>
</view>
<view style="display:flex;">
<label>商品价格:</label>
<input name="price" placeholder="请输入商品价格"/>
</view>
<view style="display:flex; margin-top:30px;">
<button style="width:30%;" formType="submit" >登录</button>
<button style="width:30%" formType="reset" >重置</button>
</view>
</form>
js文件
/* 表单提交 */
formBindsubmit(e){
// 验证字段的规则
const rules = {
name: {
required: true,
},
describe: {
required: true,
},
price: {
required: true,
number: true,
}
}
// 验证字段的提示信息,若不传则调用默认的信息
const messages = {
name: {
required: '请输入商品名称',
},
describe: {
required: '请输入商品描述',
},
price: {
required: '请输入商品价格',
},
}
// 创建实例对象
this.WxValidate = new WxValidate(rules, messages)
const params = e.detail.value
// 传入表单数据,调用验证方法
if (!this.WxValidate.checkForm(params)) {
const error = this.WxValidate.errorList[0]
console.log(error)
wx.showToast({
icon: 'none',
title: error.msg,
})
return false
}
// 表单数据发送给后端
wx.request({
url: 'http://127.0.0.1:8199/addGoods',
method: 'POST',
data: {
name: e.detail.value.name,
describe: e.detail.value.describe,
price: e.price
},
success: res=> {
console.log(res)
switch(res.data.code){
case 0:
wx.showToast({
title: '添加成功',
})
break;
default:
wx.showToast({
icon: 'none',
title: res.data.msg,
})
break;
}
}
})
}