html
<view class="id_infor_enter">
<!-- 输入框列表--开始 -->
<van-cell-group class="id_infor_enter_list">
<van-field value="{{name}}" placeholder="请输入姓名" border="{{ true }}" bind:change="onChange" data-input="name" label="姓名" input-align="right" required="{{ true }}" size="large" is-link="{{ true }}" error-message="{{nameErr}}" error-message-align="right" :rules="userFrom.tel"/>
<van-field value="{{ form.sex }}" placeholder="请选择" border="{{ true }}" label="性别" input-align="right"
required="{{ true }}" size="large" is-link="{{ true }}" bind:tap="showPopup" readonly error-message="{{sexErr}}" error-message-align="right" data-picker="sex"/>
<van-field value="{{ form.birthday }}" placeholder="请选择" border="{{ true }}" label="出生日期" input-align="right" required="{{ true }}" size="large" is-link="{{ true }}" bind:tap="showdata" readonly error-message="{{birthdayErr}}" error-message-align="right"/>
<van-field value="{{ tel }}" placeholder="请输入手机号" border="{{ true }}" bind:change="onChange" data-input="tel" label="手机号" input-align="right" required="{{ true }}" size="large" is-link="{{ true }}" error-message="{{telErr}}" error-message-align="right"/>
</van-cell-group>
<!-- 输入框列表--结束 -->
<!-- 提交按钮--开始 -->
<van-button round type="info" class="submit_btn" bind:tap="submit_btn" block>确认</van-button>
<!-- 提交按钮--结束 -->
<!-- 正常选择器--开始 -->
<!-- 传值为showPopup,pickertype -->
<picker showPopup="{{showPopup}}" pickertype="{{pickertype}}" columns="{{columns}}" bindpicker="picker"></picker>
<!-- 正常选择器--结束 -->
<!-- 日期选择器--开始 -->
<data_picker showdata="{{showdata}}" bindpickerdata="pickerdata"></data_picker>
<!-- 日期选择器--结束 -->
<van-toast id="van-toast" />
</view>
import Toast from '@vant/weapp/toast/toast';
Page({
data: {
// 表单信息
form:{
name:'',
sex:'',
birthday:'',
tel:'',
},
// 表单验证信息
formrules:{
nameErr:'',
sexErr:'',
birthdayErr:'',
telErr:'',
},
// 控制单选picker弹出
showPopup:false,
// 控制日期picker弹出
showdata:false,
//控制日期picker父传子参数
pickertype:'',
// 单一picker假数据
columns:[],
columns1:["性别"],
checked: true,
},
// 输入框方法
onChange(event) {
// 用switch控制信息变化,方法名为data-input,绑定于id_infor_list.wxml
switch(event.currentTarget.dataset['input']) {
case 'name':
let name = event.detail
this.setData({
"form.name":name,
})
break;
case 'tel':
let tel = event.detail
this.setData({
"form.tel":tel,
})
break;
}
},
// 控制向picker组件传递的值,方法名为data-picker,绑定于id_infor_list.wxml
showPopup(event){
// 获取van-field内参数
let pickertype = event.currentTarget.dataset['picker']
this.setData({
showPopup:true,
pickertype:pickertype,
columns:this.data.columns1
})
// 控制数组假数据
switch(pickertype) {
case 'sex':
this.setData({
columns:this.data.columns1
})
break;
}
},
// 接受子组件传递的值用pickertype判断信息的改变
picker(event) {
switch(event.detail.pickertype) {
case 'sex':
let sex = event.detail.pickerdetail
this.setData({ "form.sex":sex,})
break;
}
},
// 获取子组件传值
pickerdata(event){
let pickerbirthday = event.detail.birthday
// const { birthday } =this.data.form.birthday
this.setData({
"form.birthday":pickerbirthday
})
},
// 用于展示日期选择器
showdata(){
this.setData({ showdata: true });
},
// 提交按钮--引入checkFn方法做表单验证
submit_btn(){
this.checkFn('name','nameErr','昵称不能为空')
this.checkFn('sex','sexErr','性别不能为空')
this.checkFn('birthday','birthdayErr','出生日期不能为空')
this.checkFn('tel','telErr','手机号不能为空')
if(this.data.form.name.trim()&&this.data.form.sex.trim()&&this.data.form.birthday.trim()&&this.data.form.tel.trim()&&this.data.checked){
Toast('跳转');
console.log("1111111111111")
}else{
Toast('请输入完整信息');
console.log("2222222222")
}
},
// checkFn方法表单验证
checkFn(err,errKey,errStr){
if(!this.data.form[err].trim()){
this.setData({[errKey]:errStr})
return false
}else{
this.setData({ [errKey]:''})
return true
}
},
});