收藏
回答

表单校验报错

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 2.14.1

var app = getApp();

Page({

    data: {

        form: {

            userName: '',

            telNumber: '',

            addrDetail: '',

            region: ['请选择省市区/县', '', ''], // 省市区数据 第一个可以当placeholder

        },

        errorMsgShow:false,

        errorMsg: '', // 验证表单显示错误信息

        customItem: '', // 自定义picker显示的内容

        region:'',

        rules: [

            {

                name: 'userName',

                rules: { required: true, message: '请填写收货人姓名' },

            },

            {

                name: 'telNumber',

                rules: [{ required: true, message: '请填写收货人电话' }, { mobile: true, message: '电话格式不对' }]

            },

            {

                name: 'addrDetail',

                rules: { required: true, message: '请填写详细地址' }

            },

        ],

    },

    externalClasses: ['form_item', 'form_item_region'],

    Postcode: '', // 邮编

    // 省市区选择事件

    bindRegionChange(e) {

        const { value, code, postcode } = e.detail

        // console.log(code) // 统计用区划代码

        // postcode 是邮政编码

        this.Postcode = postcode

        this.setData({

            'region': value

        })

    },

    formInputChange(e) {

        const { field } = e.currentTarget.dataset

        this.setData({

            [`form.${field}`]: e.detail.value

        })

    },

    // weui提交表单

    weSubmitForm() {

        const { userName, telNumber, region, addrDetail } = this.data.form

        const validRegion = region.filter(v => v// 提取有效值

        this.selectComponent('#form').validate((valid, errors) => {

            if (!valid{

                const firstError = Object.keys(errors)

                if (firstError.length) {

                    this.setData({

                        errorMsgShow: true,

                        errorMsg: errors[firstError[0]].message

                    })

                }

            } else if (validRegion.length < 2{

                this.setData({

                    errorMsg: '请选择省市区'

                })

            } else {

                wx.showToast({

                    title: '提交成功',

                })

                wx.navigateBack({

                    delta: 1

                })

            }

        })

    },

    // 重置表单

    restForm() {

        this.setData({

            'form.userName': '',

            'form.telNumber': '',

            'form.addrDetail': '',

            'form.region': ['请选择省市区/县', '', '']

        })

        wx.navigateBack({

            delta: 1

        })

    },


    onLoad: function (options) {

        // var that = this,

        //   userInfo = wx.getStorageSync("_userInfo");

        // var userNid = wx.getStorageSync("unionid");

        // wx.request({ //位登录

        //   url: app.globalData.Url + '/api/login/event/userinfo/',

        //   data: {

        //     unionid: userNid,

        //   },

        //   method: 'POST',

        //   header: {

        //     'content-type': 'application/x-www-form-urlencoded' // 默认值

        //   },

        //   success: function (res) {

        //     console.log('----用户信息', res)

        //     if (res.data.data.utype == 2) {

        //       res.data.data.uvipdaoqi = time.toDate(res.data.data.uvipdaoqi)

        //       that.setData({

        //         vip: true,

        //         vip_time: res.data.data.uvipdaoqi,

        //       })

        //     } else if (res.data.data.utype == 1) {

        //       console.log(res.errMsg)

        //       that.setData({

        //         vip: false,

        //       })

        //     }

        //     that.setData({

        //       male: res.data.data.usex

        //     })

        //   },

        // })

        // that.setData({ //转换完毕存储

        //   userInfo: userInfo,

        // })

        // wx.getSystemInfo({

        //   success: function (res) {

        //     var windowWidth = res.windowWidth * 0.5;

        //     that.setData({

        //       //圆点坐标,x为屏幕一半,y为半径与margin-top之和,px

        //       //后面获取的触摸坐标是px,所以这里直接用px.

        //       dotPoint: {

        //         clientX: windowWidth,

        //         clientY: 250

        //       }

        //     })

        //   }

        // })

    },


    onReady: function () {


    },




})



<view class="we_form_wrap"> <!-- models:需要校验的表单数据 rules:表单校验的规则列表 prop="userName" 和 data-field="userName"的值要一样,不然验证不了 --> <!--顶部错误提示--> <mp-toptips msg="{{errorMsg}}" type="error" show="{{errorMsgShow}}" delay="1500"></mp-toptips> <mp-form id="form" rules="{{rules}}" models="{{form}}"> <mp-cells> <mp-cell class="form_item" prop="userName" title="姓名"> <input bindinput="formInputChange" value="{{form.userName}}" data-field="userName" class="weui-input" placeholder="请填写收货人姓名"/> </mp-cell> <mp-cell class="form_item" prop="telNumber" title="电话"> <input bindinput="formInputChange" value="{{form.telNumber}}" data-field="telNumber" class="weui-input" placeholder="请填写收货电话"/> </mp-cell> <mp-cell class="form_item_region" title="省市区"> <view class="addr_ma_item province_select"> <view class="picker_wrap"> <picker mode="region" bindchange="bindRegionChange" value="{{form.region}}" name="region" custom-item="{{customItem}}"> <view class="{{form.region[1]?'':'default_picker'}}"> {{form.region[0]}} {{form.region[1]?'-':''}} {{form.region[1]}} {{form.region[1]?'-':''}} {{form.region[2]}} </view> </picker> </view> <view class="addr_ma_icon">></view> </view> </mp-cell> <mp-cell class="form_item" prop="addrDetail" title="详细信息"> <input bindinput="formInputChange" value="{{form.addrDetail}}" data-field="addrDetail" class="weui-input" placeholder="街道、楼牌号等"/> </mp-cell> </mp-cells> <!--提交按钮--> <view class="submit_btn_wrap"> <button class="weui-btn" type="primary" bindtap="weSubmitForm">确定</button> <button type="warn" bindtap="restForm" plain>取消</button> </view> </mp-form> </view>
回答关注问题邀请回答
收藏
登录 后发表内容
问题标签