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

html

          确认         

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