小程序vant--form表单与验证_vant form

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