微信小程序中的正则验证、手机号验证随笔

微信小程序中的正则验证、手机号验证随笔

需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题

微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法

$("body").on("blur", ".input", function () {
  console.log($(.input).val())
})

思路:

在input onblur的时候进行存值,(注意多个input框的时候存值不要混淆)在多个input框中同时存在手机号验证的可以统一绑定同一个方法,通过不同的传值进行判断 存值.表单提交的时候进行必填字段非空校验 示例代码如下:
js部分

blurCheck: function(e) {
        var tm = this;
        if (e.detail.value != "") {
            var x = e.currentTarget.dataset.key 
            if(x == 'joinName') {
                tm.setData({
                    joinName: e.detail.value
                })
            } else if (x == 'joinConcat') {
                tm.setData({
                    joinConcat: e.detail.value
                })
            } else if (x == 'joinPhone') {
                if (!/^1(3|4|5|7|8)\d{9}$/.test(e.detail.value)) {
                    wx.showModal({
                        title: '提示',
                        content: '你输入的电话不符，请重新检查填写',
                        showCancel: false
                    })
                    tm.setData({
                        focus: true
                    })
                } else {
                    tm.setData({
                        joinPhone: e.detail.value,
                        focus: false
                    })
                }
            } else if (x == 'joinGoods') {
                tm.setData({
                    joinGoods: e.detail.value
                })
            } else if (x == 'joinBrand') {
                tm.setData({
                    joinBrand: e.detail.value
                })
            } else if (x == 'joinUrl') {
                tm.setData({
                    joinUrl: e.detail.value
                })
            }
        }
    },
formSubmit: function(e) {
        var tm = this;
        this.setData({
            formId: e.detail.formId,
            UploadGredentials: []
        });
        var p = [];
        tm.data.UserCredentials.find(function (e, tm) {
            "../../images/return-img_03.jpg" != e && p.push(e);
        }), tm.UploadBatchImages(tm, p);
        if (this.data.joinName == "") {
            wx.showModal({
                title: "提示",
                content: "请输入联系人",
                showCancel: false,
                confirmColor: "#db3c40"
            });
        } else if (this.data.joinConcat == "") {
            wx.showModal({
                title: "提示",
                content: "请输入联系人",
                showCancel: false,
                confirmColor: "#db3c40"
            });
        } else if(!(/^1(3|4|5|7|8)\d{9}$/.test(this.data.joinPhone))) {
            wx.showModal({
                title: "提示",
                content: "请输入正确的联系方式",
                showCancel: false,
                confirmColor: "#db3c40"
            });
        } else if (this.data.joinGoods == "") {
            wx.showModal({
                title: "提示",
                content: "请输入经营商品",
                showCancel: false,
                confirmColor: "#db3c40"
            });
        } else if (this.data.joinBrand == "") {
            wx.showModal({
                title: "提示",
                content: "请输入正确的退货数量",
                showCancel: false,
                confirmColor: "#db3c40"
            });
        } else if (this.data.joinUrl == "") {
            wx.showModal({
                title: "提示",
                content: "请输入正确的退货数量",
                showCancel: false,
                confirmColor: "#db3c40"
            });
        } else {
            this.setData({
                formId: e.detail.formId,
                UploadGredentials: []
            });
            var p = [];
            tm.data.UserCredentials.find(function (e, tm) {
                "../../images/return-img_03.jpg" != e && p.push(e);
            }), tm.UploadBatchImages(tm, p);
        }
    },
    UploadBatchImages: function(t, a) {
        var n = a.shift();
        void 0 != n ? e.getOpenId(function(o) {
            wx.uploadFile({
                url: e.getUrl("UploadAppletImage"),
                filePath: n,
                name: "file",
                formData: {
                    openId: o
                },
                success: function(e) {
                    var a = JSON.parse(e.data);
                    if ("OK" == a.Status) {
                        var n = t.data.UploadGredentials;
                        n.push(a.Data[0].ImageUrl), t.setData({
                            UploadGredentials: n
                        });
                    } else "NOUser" == a.Message ? wx.navigateTo({
                        url: "../login/login"
                    }) : wx.showModal({
                        title: "提示",
                        content: a.ErrorResponse.ErrorMsg,
                        showCancel: !1,
                        confirmColor: "#db3c40",
                        success: function(e) {
                            e.confirm && wx.navigateBack({
                                delta: 1
                            });
                        }
                    });
                },
                complete: function() {
                    a.length > 0 ? t.UploadBatchImages(t, a) : t.AddReturnInfo();
                }
            });
        }) : t.AddReturnInfo();
    },
    AddReturnInfo: function() {
        var t = this;
        e.getOpenId(function(a) {
            wx.request({
                url: e.getUrl("YTALApplySupplier"),
                data: {
                    openid: a,
                    supplier: t.data.joinName,
                    brand: t.data.joinBrand,
                    contactname: t.data.joinConcat,
                    mobile: t.data.joinPhone,
                    goods: t.data.joinGoods,
                    shopurl: t.data.joinUrl,
                    remark: t.data.xxxxxxxxxxxxxxxxxx,
                    imgs: t.data.UploadGredentials.join(","),
                    formId: t.data.formId
                },
                success: function(e) {
                    debugger
                    "OK" == e.data.Status ? wx.showModal({
                        title: "提示",
                        confirmColor: "#db3c40",
                        content: e.data.Message,
                        showCancel: !1,
                        success: function(res) {
                            if (res.confirm) {
                                wx.switchTab({
                                    url: "../usehome/usehome"
                                });
                            }
                        }
                    }) : "NOUser" == e.data.message ? wx.navigateTo({
                        url: "../login/login"
                    }) : wx.showModal({
                        title: "提示",
                        confirmColor: "#db3c40",
                        content: e.data.message,
                        showCancel: !1,
                        success: function(e) {
                            e.confirm && wx.navigateBack({
                                delta: 1
                            });
                        }
                    });
                },
                complete: function() {}
            });
        });
    },

页面展示部分(附带了多图片上传)

    <form bindsubmit="formSubmit" reportSubmit="true">
        <!-- <view class="form-group bg-white" style='padding-top:110rpx;'> -->
        <view class="form-group bg-white">
            <view class="form-group-name">供应商</view>
            <input data-key="joinName" maxlength="20" placeholder="请输入公司名称" placeholderStyle="color:#bdbdbd" type="text" bindblur="blurCheck"></input>
        </view>

        <view class="form-group bg-white">
            <view class="form-group-name">联系人</view>
            <input data-key="joinConcat" maxlength="20" placeholder="请输入联系人" placeholderStyle="color:#bdbdbd" type="text" bindblur="blurCheck"></input>
        </view>

        <view class="form-group bg-white">
            <view class="form-group-name">联系电话</view>
            <input data-key="joinPhone" maxlength="20" placeholder="请输入联系人手机号" placeholderStyle="color:#bdbdbd" type="number" bindblur="blurCheck"></input>
            <!-- <input data-key="joinPhone" maxlength="20" placeholder="请输入联系人手机号" placeholderStyle="color:#bdbdbd" type="number" bindblur="blurCheck" focus='{{focus}}'></input> -->
        </view>

        <view class="form-group bg-white">
            <view class="form-group-name">经营商品</view>
            <input data-key="joinGoods" maxlength="20" placeholder="请描述售卖商品品类" placeholderStyle="color:#bdbdbd" type="text" bindblur="blurCheck"></input>
        </view>

        <view class="form-group bg-white">
            <view class="form-group-name">授权品牌</view>
            <input data-key="joinBrand" maxlength="20" placeholder="请输入售卖商品品牌" placeholderStyle="color:#bdbdbd" type="text" bindblur="blurCheck"></input>
        </view>

        <view class="form-group bg-white">
            <view class="form-group-name">店铺网址</view>
            <input data-key="joinUrl" maxlength="20" placeholder="支持淘宝、京东、拼多多等主流电商平台" placeholderStyle="color:#bdbdbd" type="text" bindblur="blurCheck"></input>
        </view>

        <view class="line">
            <view></view>
        </view>
        <view class="beizhu">
            <view class="form-group-name">备注</view>
        </view>
        <view class="beizhu bg-white">
            <textarea class="group-area" name="txtarea" placeholder="在此输入备注"></textarea>
        </view>
        <view class="beizhu" style="border-bottom: 1rpx solid #fff;">
            <view class="form-group-name" style='width:500rpx;'>上传凭证(提交三证合一、授权证书等)</view>
        </view>
        <view class="beizhu bg-white" style="display:flex">
            <view bindtap="uploadImg" class="uploadimg" data-index="0">
                <image src="{{UserCredentials[0]}}" style="width:158rpx;height:158rpx;"></image>
            </view>
            <view bindtap="uploadImg" class="uploadimg" data-index="1">
                <image src="{{UserCredentials[1]}}" style="width:158rpx;height:158rpx;"></image>
            </view>
            <view bindtap="uploadImg" class="uploadimg" data-index="2">
                <image src="{{UserCredentials[2]}}" style="width:158rpx;height:158rpx;"></image>
            </view>
        </view>
        <view class="btn">
            <button class="submit" formType="submit">确定提交</button>
            <navigator class="cancel" openType="navigateBack">取消</navigator>
        </view>
    </form>

css部分因项目差距较大,就不放了

谨以此文献给正在开发岗位上奋斗爬坑的有志青年! 共勉