微信小程序动态循环添加input框分别获取用户输入的内容

无限追加用户输入框

<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;
}

},