无限追加用户输入框
<view class="box" hidden="{{!isren}}" wx:for="{{renlists}}" wx:key="*this">
<view class="txt bgtxt">
<text>随行人姓名:</text>
<input class="weui-input" data-id="{{index}}" bindinput="adduser" value="{{renlists[index].user}}"
placeholder="请填写随行人姓名" />
</view>
<view class="txt bgtxt">
<text>随行人手机:</text>
<input class="weui-input" type="number" maxlength='11' data-id="{{index}}" bindblur="addtel"
value="{{renlists[index].phone}}" placeholder="请填写随行人手机号" />
</view>
<view style="padding:15rpx 0"></view>
</view>
<view class="add" hidden="{{!isren}}" bindtap="addren">
<image src="../../images/add.png" alt="t" class="addimg" />
<view>点击继续添加</view>
</view>
<view class="btn">
<button class="submit" bindtap="wxSubmit">提交</button>
</view>
data: {
iscat: false, //是否驾车
isren: false, //随行人
renlists: [{
user: "",
phone: ""
}],
},
adduser(e) {
console.log(e.target.dataset.id, 222)
console.log(e.detail.value, 222)
let index = e.target.dataset.id;
let renlists = this.data.renlists;
renlists[index].user = e.detail.value.trim();
this.setData({
renlists
})
},
addtel(e) {
console.log(e, 333)
let index = e.target.dataset.id;
let renlists = this.data.renlists;
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(e.detail.value.trim()))) {
wx.showToast({
title: '请填写正确的手机号',
icon: 'none',
duration: 2000
})
return;
}
renlists[index].phone = e.detail.value.trim();
this.setData({
renlists
})
},
// 验证手机号
Phont(tel) {
if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(tel))) {
wx.showToast({
title: '请填写正确的手机号',
icon: 'none',
duration: 2000
})
return false;
}
},
// 添加随行人
addren() {
let renlists = this.data.renlists;
if (renlists[renlists.length - 1].user.trim() !== '' && renlists[renlists.length - 1].phone.trim() !== '') {
setTimeout(() => {
let renlists = this.data.renlists;
renlists.push({
user: "",
phone: ""
})
this.setData({
renlists
}, 300)
})
} else {
wx.showToast({
title: '请填写完整再追加',
icon: 'none',
duration: 2000
})
return;
}
},