vue+vant 表单

1.身份证<van-cell-group class="tl"><van-fieldv-model="card"clearable:disabled='active==0'label="身份证"@input='cardRule'placeholder="请输入"/></van-...

刘白超

3694人浏览 · 2019-12-30 18:43:59

刘白超 · 2019-12-30 18:43:59 发布

1.身份证

<van-cell-group class="tl">
   <van-field
     v-model="card"
     clearable
     :disabled='active==0'
     label="身份证"
     @input='cardRule'
     placeholder="请输入"
   />
</van-cell-group>

data(){
	return {
		card:'',
		cardIdTime:false,//验证身份证
	}
}

cardRule(val){   //验证身份证
  let regIdCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/; 
  clearTimeout(this.cardIdTime)
  this.cardIdTime = setTimeout(()=>{
    if(!regIdCard.test(val)){
      Toast('身份证格式错误')
      return false
    }else{
      this.cardIdTime = false
      this.getInfoById(val)
    }
  },1000)
},
submit(){
 if(this.cardIdTime){
   Toast('身份证格式错误')
    return false
  }
  //请求
}

2.性别

<van-cell-group class="tl">
  <van-cell class="sex" >
    <template slot="title">
      <span class="custom-text">性别</span>
      <van-radio-group v-model="sex" class="flex" :disabled='active==0'>
        <van-radio :name="1" class="flex" checked-color="#07c160">男</van-radio>
        <van-radio :name="2" class="flex ml24" checked-color="#07c160">女</van-radio>
      </van-radio-group>
    </template>
  </van-cell>
</van-cell-group>

data(){
	return {
		sex:1',
	}
}

3.手机号

<van-cell-group class="tl">
  <van-field
   v-model="phone"
   label="联系电话"
   type='number'
   :disabled='active==0'
   @input='phoneRule'
   placeholder="请输入"
   clearable
 />
</van-cell-group>

data(){
	return {
		phone:'',
		phoneTime :false,//验证手机
	}
}

phoneRule(val){//验证手机
 let regIdPhone = /^1\d{10}$/; 
   clearTimeout(this.phoneTime)
   this.phoneTime = setTimeout(()=>{
     if(!regIdPhone.test(val)){
       Toast('手机格式错误')
       return false
     }else{
       this.phoneTime = false
     }
   },1000)
 },
submit(){
 if(this.phoneTime){
  Toast('手机格式错误')
   return false
 }
  //请求
}

//提交再验证，也行
let regIdPhone = /^1\d{10}$/; 
if(!regIdPhone.test(this.form.mobile)){
   this.$toast('手机格式错误')
   return false
 }

4.双列下拉框

<van-cell-group class="tl">
  <van-field
    v-model="programme"
    :disabled='active==0'
    @click="programmeShow = true"
    label="捐助方案"
    placeholder="请选择"
    readonly
    is-link
  />
</van-cell-group>

<!-- 捐助方案 start-->
 <van-popup v-model="programmeShow" position="bottom ">
   <van-picker
     value-key='name'
     show-toolbar
     :columns="programmeArr"
     @cancel="programmeShow = false"
     @confirm="onConfirm"
   />
 </van-popup>
 <!-- 捐助方案 end -->
    
data(){
	return {
		spec:'',//第一列的值，提交后台
		giveType :'',//第二列的值，提交后台
		programme:'',//拼接的值，用于页面显示
		programmeArr:[{
          values: [{name:'9赠3',id:'1'},{name:'18赠6',id:'2'}],
          className: 'column1'
        },
        {
          values: [{name:'12.5mg',id:'1'},{name:'25mg',id:'2'}],
          className: 'column2',
        }],
		programmeShow:false,
	}
}
getDetail(){//数据回显 
	//detailData后台返回值，res.data.data
	let giveTypeObj = this.programmeArr[0].values.find((item)=>item.id == detailData.giveType)
    let specObj = this.programmeArr[1].values.find((item)=>item.id == detailData.spec)

	this.spec = detailData.spec
    this.giveType = detailData.giveType
    this.programme = giveTypeObj?(giveTypeObj.name+'('+(specObj?specObj.name:'')+')'):''
},
onConfirm(value, index ) {
  console.log(value, index)
  this.programmeShow = false
  this.spec = value[1].id
  this.giveType = value[0].id
  this.programme = value[0].name+'('+value[1].name+')'
},

5.四级联动

<van-cell-group class="tl">
 <van-field
   v-model="provinces"
   :disabled='active==0'
   @click="showProvinces"
   label="选择省市"
   placeholder="请选择"
   readonly
   is-link
 />
 <van-field
   v-model="hospital"
   :disabled='active==0'
   @click="showHospital"
   label="选择医院"
   placeholder="请选择"
   readonly
   is-link
 />
 <van-field
   v-model="department"
   :disabled='active==0'
   @click="showDepartment"
   label="选择科室"
   placeholder="请选择"
   readonly
   is-link
 />
 <van-field
   v-model="doctor"
   :disabled='active==0'
   @click="showDoctor"
   label="选择医生"
   placeholder="请选择"
   readonly
   is-link
 />
</van-cell-group>

<!-- 省市 start-->
<van-popup v-model="provincesShow" position="bottom ">
  <van-picker
    value-key='name'
    show-toolbar
    :columns="provincesArr"
    @cancel="provincesShow = false"
    @confirm="onConfirm"
    @change="provincesOnChange"
  />
</van-popup>
<!-- 省市 end -->
<!-- 医院 start -->
<van-popup v-model="hospitalShow" position="bottom ">
  <van-picker
    show-toolbar
    value-key='hospitalName'
    :columns="hospitalArr"
    @cancel="hospitalShow = false"
    @confirm="onConfirm"
  />
</van-popup>
<!-- 医院 end -->
<!-- 科室 start -->
<van-popup v-model="departmentShow" position="bottom ">
  <van-picker
    show-toolbar
    value-key='hospitalDeptName'
    :columns="departmentArr"
    @cancel="departmentShow = false"
    @confirm="onConfirm"
  />
</van-popup>
<!-- 科室 end -->
<!-- 医生 start -->
<van-popup v-model="doctorShow" position="bottom ">
  <van-picker
    show-toolbar
    value-key='doctorName'
    :columns="doctorArr"
    @cancel="doctorShow = false"
    @confirm="onConfirm"
  />
</van-popup>
<!-- 医生 end -->

data(){
	return {
	  provinces:'',
      provinceName:'',
      provinceId:'',
      provincesArr:[{
          values: [],
          className: 'column1'
        },
        {
          values: [],
          className: 'column2',
        }],
      provincesShow:false,
      cityId:'',
      cityName:'',
      hospital:'',
      hospitalId:'',
      hospitalArr:[],
      hospitalShow:false,
      department:'',
      deptId:'',
      departmentArr:[], //科室
      departmentShow:false,
      doctor:'',
      doctorId:'',
      doctorArr:[],
      doctorShow:false,
      type:''
	}
}

getDetail(){//数据回显 
   //detailData后台返回值，res.data.data
   this.provinces = detailData.provinceName + detailData.cityName
   this.provinceId = detailData.provinceId
   this.provinceName = detailData.provinceName
   this.cityId = detailData.cityId
   this.cityName = detailData.cityName
   this.hospitalId = detailData.hospitalId
   this.hospital = detailData.hospitalName
   this.deptId = detailData.hospitalDeptId
   this.department = detailData.hospitalDeptName
   this.doctorId = detailData.doctorId
   this.doctor = detailData.doctorName
},
onConfirm(){
  if(this.type == 'provinces'){//省市
    this.provincesShow = false
    this.provinces = value[0].name+value[1].name
    this.provinceId = value[0].id
    this.provinceName = value[0].name
    this.cityId = value[1].id
    this.cityName = value[1].name

    this.hospital = '',
    this.hospitalId = '',
    this.hospitalArr = []
    this.department = '',
    this.deptId = '',
    this.departmentArr = []
    this.doctor = '',
    this.doctorId = '',
    this.doctorArr = [] 
  }else if(this.type == 'hospital'){ //医院
    this.hospitalShow = false
    this.hospital = value.hospitalName
    this.hospitalId = value.id

    this.department = '',
    this.deptId = '',
    this.departmentArr = []
    this.doctor = '',
    this.doctorId = '',
    this.doctorArr = [] 
  }else if(this.type == 'department'){ //科室
    this.departmentShow = false
    this.department = value.hospitalDeptName
    this.deptId = value.id

    this.doctor = '',
    this.doctorId = '',
    this.doctorArr = [] 
  }else if(this.type == 'doctor'){ //医生
    this.doctorShow = false
    this.doctor = value.doctorName
    this.doctorId = value.id
  }
},
getPro(){
      let that = this
      axios.get(this.$my.api+'/wet/base/getProList')
        .then(res => {
          if(res.data&&res.data.code == 200){
            let arr = [...this.provincesArr]
            arr[0].values = res.data.data
            this.provincesArr= [...arr]
            that.getCityList(res.data.data[0].code)
          }else{
            Toast(res.data.message)
          }
        }, response => {
            console.log("error");
        })
    },
    getCityList(code){
      let that = this
      axios.get(this.$my.api+'/wet/base/getCityList?code='+code)
        .then(res => {
          if(res.data&&res.data.code == 200){
            let arr = [...this.provincesArr]
            arr[1].values = res.data.data
            this.provincesArr= [...arr]
          }else{
            Toast(res.data.message)
          }
        }, response => {
            console.log("error");
        });
    },
    getHospList(cityId){
      let that = this
      if(cityId){
        axios.get(this.$my.api+'/wet/base/getHospList?cityId='+cityId)
          .then(res => {
            if(res.data&&res.data.code == 200){
              this.hospitalArr= res.data.data
            }else{
              Toast(res.data.message)
            }
          }, response => {
              console.log("error");
          });
        }
    },
    getDepList(hospitalId){ //获取科室
      let that = this
      if(hospitalId){
        axios.get(this.$my.api+'/wet/base/getDepList?hospitalId='+hospitalId)
          .then(res => {
            if(res.data&&res.data.code == 200){
              this.departmentArr= res.data.data
            }else{
              Toast(res.data.message)
            }
          }, response => {
              console.log("error");
          });
        }
    },
    getDocList(hospitalId,deptId){ 
      let that = this
      if(hospitalId&&deptId){
        axios.get(this.$my.api+'/wet/base/getDocList?hospitalId='+hospitalId+'&deptId='+deptId )
          .then(res => {
            if(res.data&&res.data.code == 200){
              this.doctorArr= res.data.data
            }else{
              Toast(res.data.message)
            }
          }, response => {
              console.log("error");
          });
        }
    },
    showProvinces(){ //省市
      this.provincesShow = true
      this.type = 'provinces'
    },
    provincesOnChange(picker, values) {//省市
      //根据code请求数据
      this.getCityList(values[0].code) //根据省code获取城市
    },
    showHospital(){ //医院
      this.hospitalShow = true
      this.type = 'hospital'
      this.getHospList(this.cityId) //根据cityId获取医院
    },
    showDepartment(){ //科室
      this.departmentShow = true
      this.type = 'department'
      this.getDepList(this.hospitalId) //根据hospitalId获取科室
    },
    showDoctor(){ //医生
      this.doctorShow = true
      this.type = 'doctor'
      this.getDocList(this.hospitalId ,this.deptId) //获取医生
    },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

刘白超

@qq_25252769

已为社区贡献14条内容