需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题
微信小程序中不通过操作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部分因项目差距较大,就不放了
