微信小程序-表单-表单验证

1,419 阅读1分钟

WxValidate.js( 用于表单验证 ) 下载地址

github.com/wux-weapp/w…

文档地址

github.com/wux-weapp/w…


表单

<!-- 表单 -->
<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;
        }
        }
    })
}