微信小程序中的正则验证、手机号验证随笔
微信小程序中的正则验证、手机号验证随笔
需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题
微信小程序中不通过操作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() {}
});
});
},
页面展示部分(附带了多图片上传)
css部分因项目差距较大,就不放了
谨以此文献给正在开发岗位上奋斗爬坑的有志青年! 共勉